├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .prettierrc.js ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── .vuepress │ ├── components │ │ ├── Demo.vue │ │ ├── SourceCode.vue │ │ └── examples │ │ │ └── standard-component-doc.vue │ ├── config.js │ └── enhanceApp.js ├── README.md ├── components │ ├── README.md │ └── standard-component.md └── guide.md ├── package.json ├── src ├── components │ ├── FunctionalComponent │ │ ├── FunctionalComponent.spec.js │ │ ├── FunctionalComponent.vue │ │ └── index.js │ ├── StandardComponent │ │ ├── StandardComponent.spec.js │ │ ├── StandardComponent.vue │ │ └── index.js │ └── index.js └── main.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "@vue/prettier"], 7 | rules: { 8 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 9 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" 10 | }, 11 | parserOptions: { 12 | parser: "babel-eslint" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: false, 3 | singleQuote: true 4 | }; 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Stephen Siegert 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-component-library-template 2 | 3 | Supporting project and code for [Vue Component Library](https://xiegerts.com/series/vue-component-library/) post series. 4 | 5 | > In this series, we’ll focus on structuring a Vue component library as a plugin for use, and reuse. That also includes distribution and documentation. That’s what is so great about Vue - the ability to create your own building blocks for designing a user experience. This series of posts is not about writing components, that’s a subject for another day. 6 | 7 | - [Creating a Vue.js component library: Introduction](https://xiegerts.com/post/creating-vue-component-library-introduction/) 8 | 9 | - [Structuring a Vue component library](https://xiegerts.com/post/creating-vue-component-library-structure/) 10 | 11 | - [Consolidating components into a Vue.js plugin](https://xiegerts.com/post/creating-vue-component-library-plugin/) 12 | 13 | - [Using VuePress for plugin documentation](https://xiegerts.com/post/creating-vue-component-library-documentation/) 14 | 15 | - [Deploy VuePress on Netlify](https://www.xiegerts.com/post/creating-vue-component-library-deploy/) 16 | 17 | - [Publishing a Vue component plugin on npm](https://www.xiegerts.com/post/creating-vue-component-library-npm/) 18 | 19 | ## Project setup 20 | 21 | ``` 22 | yarn install 23 | ``` 24 | 25 | ### Compiles and hot-reloads documentation site for development 26 | 27 | ``` 28 | yarn docs:dev 29 | ``` 30 | 31 | ### Compiles and minifies for documentation site for production 32 | 33 | ``` 34 | yarn docs:build 35 | ``` 36 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/app"] 3 | }; 4 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Demo.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | -------------------------------------------------------------------------------- /docs/.vuepress/components/SourceCode.vue: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/.vuepress/components/examples/standard-component-doc.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | locales: { 3 | '/': { 4 | lang: 'en-US', 5 | title: 'Component Library 🥂', 6 | description: 'Documentation site for the Vue component library plugin' 7 | } 8 | }, 9 | themeConfig: { 10 | repoLabel: 'Contribute!', 11 | // git repo here... gitlab, github 12 | repo: 'https://github.com/siegerts/vue-component-library-template', 13 | docsDir: 'docs', 14 | editLinks: true, 15 | docsBranch: 'master', 16 | editLinkText: 'Help us improve this page!', 17 | search: false, 18 | locales: { 19 | '/': { 20 | label: 'English', 21 | selectText: 'Languages', 22 | lastUpdated: 'Last Updated', 23 | // service worker is configured but will only register in production 24 | serviceWorker: { 25 | updatePopup: { 26 | message: 'New content is available.', 27 | buttonText: 'Refresh' 28 | } 29 | }, 30 | nav: [ 31 | { text: 'Getting Started', link: '/guide' }, 32 | { text: 'Components', link: '/components/' }, 33 | // external link to git repo...again 34 | { 35 | text: 'GitHub', 36 | link: 'https://github.com/siegerts/vue-component-library-template' 37 | } 38 | ], 39 | sidebar: { 40 | '/components/': [ 41 | { 42 | title: 'Components', 43 | collapsable: false, 44 | children: ['standard-component'] 45 | } 46 | ] 47 | } 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | // enhanceApp.js 2 | import ComponentLibrary from './../../src/main.js' 3 | 4 | export default ({ Vue, options, router, siteData }) => { 5 | Vue.use(ComponentLibrary) 6 | } 7 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: 4 | actionText: Get Started → 5 | actionLink: /guide 6 | features: 7 | - title: Feature 1 8 | details: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 9 | - title: Feature 2 10 | details: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 11 | - title: Feature 3 12 | details: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 13 | footer: Example Vue Component Library 2019 14 | --- 15 | -------------------------------------------------------------------------------- /docs/components/README.md: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | This is the index page for all of the documented components. 4 | -------------------------------------------------------------------------------- /docs/components/standard-component.md: -------------------------------------------------------------------------------- 1 | # standard-component 2 | 3 | Wow! This component is awesome. 4 | 5 | ## Example 6 | 7 | 8 | 9 | ## Source Code 10 | 11 | 12 | <<< @/src/components/StandardComponent/StandardComponent.vue 13 | 14 | 15 | ## slots 16 | 17 | ... 18 | 19 | ## props 20 | 21 | ... 22 | -------------------------------------------------------------------------------- /docs/guide.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | ... 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-component-library", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "docs:dev": "vuepress dev docs", 9 | "docs:build": "vuepress build docs", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "devDependencies": { 13 | "@vue/cli-plugin-babel": "^3.0.0", 14 | "@vue/cli-plugin-eslint": "^3.0.0", 15 | "@vue/cli-service": "^3.0.0", 16 | "@vue/eslint-config-prettier": "^4.0.1", 17 | "babel-eslint": "^10.0.1", 18 | "eslint": "^5.8.0", 19 | "eslint-plugin-vue": "^5.0.0", 20 | "vue-template-compiler": "^2.5.21", 21 | "vuepress": "^1.0.0-alpha.44" 22 | }, 23 | "dependencies": {} 24 | } 25 | -------------------------------------------------------------------------------- /src/components/FunctionalComponent/FunctionalComponent.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siegerts/vue-component-library-template/534bd44e5a0c2c51b182d2f2e70b6e1e07976f57/src/components/FunctionalComponent/FunctionalComponent.spec.js -------------------------------------------------------------------------------- /src/components/FunctionalComponent/FunctionalComponent.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/FunctionalComponent/index.js: -------------------------------------------------------------------------------- 1 | import FunctionalComponent from './FunctionalComponent.vue' 2 | 3 | export default FunctionalComponent 4 | -------------------------------------------------------------------------------- /src/components/StandardComponent/StandardComponent.spec.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siegerts/vue-component-library-template/534bd44e5a0c2c51b182d2f2e70b6e1e07976f57/src/components/StandardComponent/StandardComponent.spec.js -------------------------------------------------------------------------------- /src/components/StandardComponent/StandardComponent.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/StandardComponent/index.js: -------------------------------------------------------------------------------- 1 | import StandardComponent from './StandardComponent.vue' 2 | 3 | export default StandardComponent 4 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as StandardComponent } from './StandardComponent' 2 | export { default as FunctionalComponent } from './FunctionalComponent' 3 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import * as components from './components' 2 | 3 | const ComponentLibary = { 4 | install(Vue, options = {}) { 5 | // components 6 | for (const componentName in components) { 7 | const component = components[componentName] 8 | 9 | Vue.component(component.name, component) 10 | } 11 | } 12 | } 13 | 14 | export default ComponentLibary 15 | 16 | if (typeof window !== 'undefined' && window.Vue) { 17 | window.Vue.use(ComponentLibary) 18 | } --------------------------------------------------------------------------------