{"id":21246931,"url":"https://github.com/mitevpi/vue-component-lib-template","last_synced_at":"2026-02-12T04:10:08.269Z","repository":{"id":44256342,"uuid":"258579777","full_name":"mitevpi/vue-component-lib-template","owner":"mitevpi","description":"Template for creating a component library/design system using Vue.js.","archived":false,"fork":false,"pushed_at":"2024-10-25T05:17:44.000Z","size":1452,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T03:07:36.730Z","etag":null,"topics":["component-library","frontend","template","vue","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mitevpi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-24T17:34:07.000Z","updated_at":"2021-05-12T14:25:20.000Z","dependencies_parsed_at":"2022-09-04T05:51:05.710Z","dependency_job_id":null,"html_url":"https://github.com/mitevpi/vue-component-lib-template","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-component-lib-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-component-lib-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-component-lib-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-component-lib-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mitevpi","download_url":"https://codeload.github.com/mitevpi/vue-component-lib-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248813794,"owners_count":21165633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","frontend","template","vue","vuejs"],"created_at":"2024-11-21T02:10:22.259Z","updated_at":"2026-02-12T04:10:03.243Z","avatar_url":"https://github.com/mitevpi.png","language":"JavaScript","readme":"\u003cp float=\"left\"\u003e\n    \u003cimg src=\"https://cdn.auth0.com/blog/vuejs/vue-logo.png\" alt=\"Vue.js\" width=\"100\"/\u003e\n    \u003cimg src=\"https://opencollective-production.s3-us-west-1.amazonaws.com/011fc620-4cb2-11e9-a51a-fdbb10b4cabb.png\" alt=\"Storybook\" width=\"100\"/\u003e\n\u003c/p\u003e\n\n# Vue.js Component Library Template\n\nA Design System / Component Library Template for enabling graphic\nconsistency and legibility across web development projects by creating\nreusable components and styles with accessible \u0026 legible documentation.\nBuilt on top of [Vue.js](https://vuejs.org/).\n\n## Usage\n\nThis Template is composed of two major categories: [Styles](src/styles)\nand [Components](src/components). It builds to compiled components\n(`.js`) and compiled styles (`.css`) from the source (`.vue`) files\nwhich can be used across web applications. It also creates a\n[Storybook](https://storybook.js.org/) site for component/design system\ndocumentation.\n\nClone this repository locally, and use it as a starting point for\nbuilding a component library / design system on top of [Vue.js](https://vuejs.org/).\n\n## Added/Updated Configurations to Vue CLI Starter\n\n1. [AirBnB Style Guide](https://github.com/airbnb/javascript)\n2. [Prettier Style Guide](https://prettier.io/)\n3. [ESLint (Style Enforcing)](https://eslint.org/)\n4. [Storybook](https://storybook.js.org/)\n5. [Library Build](https://cli.vuejs.org/guide/build-targets.html#library)\n6. [SCSS/SASS](https://github.com/sass/node-sass)\n\n## Key Commands\n\nAfter cloning/downloading the repository locally, install the required\ndependencies using `npm i`. After installation, the following commands\ncan be used to develop \u0026 build the component library.\n\n1. `npm run build:all` - This will build the component library in the\n   `dist` folder, the preview app in the `dist-app` folder, and the\n   static storybook site for documenting the components in the\n   `storybook-static` folder.\n2. `npm run storybook` - Runs a local instance of [Storybook](https://storybook.js.org/), allowing\n   you to preview/interact with your component documentation.\n3. `npm run serve` - Runs the preview app.\n\n## How to Import (The Built Library)\n\n### Importing Components\n\n#### Global\n\nImporting the single file .vue components directly. (If using Vue CLI 3 with Babel or TypeScript, it's recommended that you import its src directory. This will minimize the size of your application by preventing duplicate or unnecessary polyfills.)\n\nImporting the source `.vue` file:\n\n```js\n// main.js\nimport HelloWorld from \"component-library/src/components\";\nVue.use(HelloWorld);\n```\n\nImporting the bundled `.js`:\n\n```js\n// main.js\nimport HelloWorld from \"component-library\";\nVue.use(HelloWorld);\n```\n\n#### In-Component Import\n\nFor single use in a component or small set of components.\n\nImporting the source `.vue` file:\n\n```js\n// component.vue\nimport HelloWorld from \"component-library/src/components/HelloWorld\";\n\nexport default {\n  name: \"Tester\",\n  components: {\n    HelloWorld,\n    Footer: () =\u003e import(\"component-library/src/components/Footer\"),\n  }\n}\n\u003c/script\u003e\n```\n\nImporting the bundled `.js` components individually.\n\n```js\n// component.vue\nimport { HelloWorld } from \"component-library\";\n\nexport default {\n  name: \"Tester\",\n  components: {\n    HelloWorld\n  }\n}\n\u003c/script\u003e\n```\n\n### Importing Styles\n\n#### Loading Compiled CSS\n\nThe styles are written in SCSS and can be compiled upon building this library.\nThey can be loaded into an application that doesn't have SCSS loading\ncapability by referencing/importing the `component-library.css` file which is\ncreated in the `dist` folder of this repository when executing `npm run build`.\n\nIn order to enable this functionality, an edit has to be made in\n[`vue.config.js`](vue.config.js). The line `extract: false` must be removed\nor set to true, so that the compiled `.css` file(s) are created upon build.\n\n```js\nimport \"component-library/dist/component-library.css\";\n```\n\n#### Loading SCSS Directly\n\nIn order to import and use styles across Vue.js applications, the application will need to have `sass`, `node-sass`, and `sass-loader` installed as dev dependencies. Once installed, the style files may be imported using the syntax below.\n\n```scss\n// import in vue.js style section\n@import \"./styles/colors.scss\";\n@import \"./styles/font.scss\";\n@import \"./styles/typography-screen\";\n```\n\nAfter importing, styles may be applied through classes, or through referencing the variables exported by the SASS.\n\n```scss\n/* importing variables in css */\n#nav a {\n  @extend .font-bold;\n  color: $navy-blue;\n}\n#nav a.router-link-exact-active {\n  color: $blue;\n}\n```\n\n```html\n\u003c!-- using classes directly in html --\u003e\n\u003ch1 class=\"typography-page-head-sm\"\u003ePage Head SM\u003c/h1\u003e\n\u003ch1 class=\"typography-page-head-lg\"\u003ePage Head LG\u003c/h1\u003e\n```\n\n## Design System\n\nThe structure of this project and component library are meant to emulate\na larger-scale Design System (such as Google's Material).\n\n### Colors\n\nColors are referenced into components from the\n[styles folder](src/styles/colors.scss).\n\n### Icons\n\nThe icons are [FontAwesome 5](https://fontawesome.com/).\n\n### Components\n\nComponents can be found in the [src/components](src/components) folder\nin the root directory of this repository.\n\n### Typography \u0026 Font\n\nTypography \u0026 Font classes can be found under the\n[src/styles](src/styles) folder. Currently, `font.scss` and\n`typography-screen.scss` are available for font \u0026 typography styling.\n\n## Developer Documentation\n\n### Building\n\nIn order to contribute to this project, fork/clone this repository\nlocally. After cloning is completed, install the dependencies using `npm i`.\n\n#### Preview\n\nYou can start a development server by running the commands below in the\nroot directory of this repository. Once the development server is\nrunning, view localhost:8080 using Chrome and\n[Vue.js Dev Tools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en).\nThis is a preview application and will allow you to visualize the\ncomponents/styles that will ultimately be compiled to the design system\nlibrary.\n\n```cmd\nnpm run serve\n```\n\nor run the [Storybook](https://storybook.js.org/) instance instead of the preview app\n\n```cmd\nnpm run storybook\n```\n\n#### Library\n\nTo build the project as a library, run `npm run build` in the root directory of the repository.\n\n## Commands\n\nThe following commands are used to develop the project:\n\n1. `npm run build` - Build the package distribution bundle.\n2. `npm run build:app` - Build the preview web application.\n3. `npm run build:all` - Build the preview application, distribution\n   bundles, and the [Storybook](https://storybook.js.org/) static site.\n4. `npm run serve` - Start a development server with live-reloading on\n   changes. (Used for previewing individual components.)\n5. `npm run lint` - Lint code using ESLint and Vue, AirBnB, and Prettier configs.\n6. `npm test` - Run unit tests for the individual components in the package.\n7. `npm run release` - Runs tests, build, and version incrementing\n   procedures.\n8. `npm run storybook` - Run [Storybook](https://storybook.js.org/) to\n   see the component library in action.\n9. `npm run build- storybook` - Build the\n   [Storybook](https://storybook.js.org/) to a static application (for\n   deploying design system documentation elsewhere)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitevpi%2Fvue-component-lib-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitevpi%2Fvue-component-lib-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitevpi%2Fvue-component-lib-template/lists"}