Integration with Hot Reloading

This setup is useful when you only have one application and want to integrate the Design System directly.

You will see changes to the Design System directly reflected in your application and in the living styleguide.

Integration

• Clone the Design System to a subfolder of your project and install it's dependencies

cd path/to/your/project
git clone https://github.com/visualjerk/vue-cion-design-system.git design-system
cd design-system && yarn install

• Add the Design System's dev command to your application's package.json:

"scripts": {
  ...
  "designsystem": "cd design-system && yarn dev",
  ...
},

From here on the next steps depend on the type of setup you use.

Vue CLI

• Create a vue.config.js with the following content. If you already got one, integrate the code in it.

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@@/styles/shared.scss";`
      }
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@@': path.resolve(__dirname, './design-system/src/system')
      }
    },
    module: {
      rules: [
        {
          resourceQuery: /blockType=docs/,
          loader: require.resolve('./design-system/src/loader/docs-trim-loader.js')
        }
      ]
    }
  }
}

• Add these lines to you main.js

import Vue from "vue";

...

import System from "@@";
import "@@/styles/main.scss";

Vue.use(System);

...

• Now you can use the design system's components and SCSS Variables in your application

Webpack without Vue CLI

...to be done

NUXT

• Create a new plugin plugins/design-system.js with following content:

import Vue from 'vue'
import DesignSystem from '@@'
import '@@/styles/main.scss'

Vue.use(DesignSystem)

• Install nuxt-sass-resources-loader and vue-svg-loader:

yarn add nuxt-sass-resources-loader vue-svg-loader --dev

• Add the following lines to nuxt.config.js:

const path = require('path')

...

module.exports = {

  ...

  plugins: [

    ...

    { src: '~/plugins/design-system.js', ssr: true },

    ...

  ],

  ...

  modules: [

    ...

    ['nuxt-sass-resources-loader', path.resolve(__dirname, './styleguide/src/system/styles/shared.scss')]

    ...

  ],

  ...

  build: {

    ...

    extend(config, ctx) {

      ...

      config.resolve.alias['@@'] = path.resolve(__dirname, './styleguide/src/system')
      config.module.rules.push({
        resourceQuery: /blockType=docs/,
        loader: require.resolve('./styleguide/src/loader/docs-trim-loader.js')
      })
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
      svgRule.test = /\.(png|jpe?g|gif|webp)$/
      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
        options: {
          svgo: {
            plugins: [
              {
                removeViewBox: false
              },
              {
                removeDimensions: true
              }
            ]
          }
        }
      })

      ...

    }
  }
  ...
}

• Now you can use the design system's components and SCSS Variables in your application

Developing

• Start the design system dev server / living styleguide

yarn designsystem

• Start your application's dev server (ex. yarn dev)