Vue.js Component Library Template

A Design System / Component Library Template for enabling graphic consistency and legibility across web development projects by creating reusable components and styles with accessible & legible documentation. Built on top of Vue.js.

Usage

This Template is composed of two major categories: Styles and Components. It builds to compiled components (.js) and compiled styles (.css) from the source (.vue) files which can be used across web applications. It also creates a Storybook site for component/design system documentation.

Clone this repository locally, and use it as a starting point for building a component library / design system on top of Vue.js.

Added/Updated Configurations to Vue CLI Starter

1. AirBnB Style Guide
2. Prettier Style Guide
3. ESLint (Style Enforcing)
4. Storybook
5. Library Build
6. SCSS/SASS

Key Commands

After cloning/downloading the repository locally, install the required dependencies using npm i. After installation, the following commands can be used to develop & build the component library.

1. npm run build:all - This will build the component library in the dist folder, the preview app in the dist-app folder, and the static storybook site for documenting the components in the storybook-static folder.
2. npm run storybook - Runs a local instance of Storybook, allowing you to preview/interact with your component documentation.
3. npm run serve - Runs the preview app.

How to Import (The Built Library)

Importing Components

Global

Importing 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.)

Importing the source .vue file:

// main.js
import HelloWorld from "component-library/src/components";
Vue.use(HelloWorld);

Importing the bundled .js:

// main.js
import HelloWorld from "component-library";
Vue.use(HelloWorld);

In-Component Import

For single use in a component or small set of components.

Importing the source .vue file:

// component.vue
import HelloWorld from "component-library/src/components/HelloWorld";

export default {
  name: "Tester",
  components: {
    HelloWorld,
    Footer: () => import("component-library/src/components/Footer"),
  }
}
</script>

Importing the bundled .js components individually.

// component.vue
import { HelloWorld } from "component-library";

export default {
  name: "Tester",
  components: {
    HelloWorld
  }
}
</script>

Importing Styles

Loading Compiled CSS

The styles are written in SCSS and can be compiled upon building this library. They can be loaded into an application that doesn't have SCSS loading capability by referencing/importing the component-library.css file which is created in the dist folder of this repository when executing npm run build.

In order to enable this functionality, an edit has to be made in vue.config.js. The line extract: false must be removed or set to true, so that the compiled .css file(s) are created upon build.

import "component-library/dist/component-library.css";

Loading SCSS Directly

In 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.

// import in vue.js style section
@import "./styles/colors.scss";
@import "./styles/font.scss";
@import "./styles/typography-screen";

After importing, styles may be applied through classes, or through referencing the variables exported by the SASS.

/* importing variables in css */
#nav a {
  @extend .font-bold;
  color: $navy-blue;
}
#nav a.router-link-exact-active {
  color: $blue;
}

<!-- using classes directly in html -->
<h1 class="typography-page-head-sm">Page Head SM</h1>
<h1 class="typography-page-head-lg">Page Head LG</h1>

Design System

The structure of this project and component library are meant to emulate a larger-scale Design System (such as Google's Material).

Colors

Colors are referenced into components from the styles folder.

Icons

The icons are FontAwesome 5.

Components

Components can be found in the src/components folder in the root directory of this repository.

Typography & Font

Typography & Font classes can be found under the src/styles folder. Currently, font.scss and typography-screen.scss are available for font & typography styling.

Developer Documentation

Building

In order to contribute to this project, fork/clone this repository locally. After cloning is completed, install the dependencies using npm i.

Preview

You can start a development server by running the commands below in the root directory of this repository. Once the development server is running, view localhost:8080 using Chrome and Vue.js Dev Tools. This is a preview application and will allow you to visualize the components/styles that will ultimately be compiled to the design system library.

npm run serve

or run the Storybook instance instead of the preview app

npm run storybook

Library

To build the project as a library, run npm run build in the root directory of the repository.

Commands

The following commands are used to develop the project:

1. npm run build - Build the package distribution bundle.
2. npm run build:app - Build the preview web application.
3. npm run build:all - Build the preview application, distribution bundles, and the Storybook static site.
4. npm run serve - Start a development server with live-reloading on changes. (Used for previewing individual components.)
5. npm run lint - Lint code using ESLint and Vue, AirBnB, and Prettier configs.
6. npm test - Run unit tests for the individual components in the package.
7. npm run release - Runs tests, build, and version incrementing procedures.
8. npm run storybook - Run Storybook to see the component library in action.
9. npm run build- storybook - Build the Storybook to a static application (for deploying design system documentation elsewhere)