├── .env
├── .gitignore
├── nuxt.config.js
├── plugins
    └── design-system.js
├── pages
    └── index.vue
├── package.json
└── readme.md


/.env:
--------------------------------------------------------------------------------
1 | HOST=0.0.0.0
2 | PORT=3000


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.nuxt
3 | /yarn.lock


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
1 | require('dotenv').config();
2 | 
3 | module.exports = {
4 |   plugins: [{
5 |     src: '~/plugins/design-system', ssr: false
6 |   }]
7 | }
8 | 


--------------------------------------------------------------------------------
/plugins/design-system.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | // Import the Design System
4 | import DesignSystem from 'vue-design-system'
5 | import 'vue-design-system/dist/system/system.css'
6 | 
7 | Vue.use(DesignSystem)
8 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Index />
 3 | </template>
 4 | 
 5 | <style>
 6 |   * {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |   }
10 |   html,
11 |   body,
12 |   #__layout,
13 |   #__nuxt {
14 |     min-height: 100%;
15 |     height: 100%;
16 |   }
17 | </style>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-design-system-with-nuxt",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "dev": "nuxt"
 8 |   },
 9 |   "dependencies": {
10 |     "dotenv": "^6.0.0",
11 |     "nuxt": "^2.0.0",
12 |     "vue": "^2.5.17",
13 |     "vue-design-system": "git+https://github.com/viljamis/vue-design-system",
14 |     "vue-server-renderer": "^2.5.17",
15 |     "vue-template-compiler": "^2.5.17"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Using Vue Design System as an NPM Dependency on Nuxt project
 2 | 
 3 | 
 4 | ## Testing from a remote repository
 5 | 
 6 | 1. Clone this repository
 7 | 2. Run `rm -rf node_modules && npm install`
 8 | 3. Now you can run `npm run dev` to test that the design system build and its components work.
 9 | 4. When you’re ready to start testing your own system library, switch the `vue-design-system` dependency in the package.json to point to your own private repository.
10 | 
11 | 
12 | ### Testing things locally:
13 | 
14 | 1. Switch to your vueds project and change `libraryTarget` setting in `config/index.js` to `commonjs2`.
15 | 2. Now build your design system for production by running `npm run build:system` inside the vueds project.
16 | 3. After done, switch to this project and run first `rm -rf node_modules` to make sure the temporary local installation won’t cause issues.
17 | 4. Now install the system locally by running `npm install --save file:/Users/viljamis/code/vue-design-system` (modify the path to match your own system).
18 | 5. Once you’ve installed the design system, run `npm install` to install the rest of the dependencies.
19 | 6. In your nuxt.js project, create a new file at `plugins/design-system.js`:
20 |   ``` js
21 |   import Vue from 'vue'
22 |   import DesignSystem from 'vue-design-system'
23 |   import 'vue-design-system/dist/system/system.css'
24 | 
25 |   Vue.use(DesignSystem)
26 |   ```
27 | 7. Import this plugin in the nuxt.config.js file (you can remove the `ssr: false` part if you build your library as a `commonjs2` module):
28 |   ``` js
29 |   plugins: [{
30 |     src: '~/plugins/design-system', ssr: false
31 |   }]
32 |   ```
33 | 8. Now you can run `npm run dev` to test that your design system build and its components work (you will get a couple of errors for some reason when testing locally).
34 | 9. If everything more or less works you should move your system to a private GitHub repository and do the NPM install directly from that repo _(see the steps above)._
35 | 


--------------------------------------------------------------------------------