mstaff-components-library

Mstaff design system

Documentation

Installation to a new vue 3 project

Install from NPM

1npm install @hublo/mstaff-components-library

Bootstrap is bundled into the library, so you don't need to install it separately.
To use Bootstrap components into your project, install unplugin-vue-components and add some configuration to your vite.config.js.

1npm i unplugin-vue-components -D

1// vite.config.js
2
3import { defineConfig } from 'vite'
4import vue from '@vitejs/plugin-vue'
5
6// unplugin-vue-components
7import Components from 'unplugin-vue-components/vite'
8import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
9
10export default defineConfig({
11	plugins: [
12		vue(),
13		Components({
14			resolvers: [BootstrapVueNextResolver()]
15		})
16	]
17})

Doing this is enought for all bootstrap components to work in your project.
You can also add bootstrap-vue-next as a dependency to your package.json to allow your IDE to detect Boostrap tags as known components.

1{
2	"dependencies": {
3		"bootstrap-vue-next": "*"
4	}
5}

Fontawesome is bundled into the library, so you don't need to install it separately.
To use Fontawesome icons component, add this configuration to your main.js.

1import { FontAwesomeIcon } from '@hublo/mstaff-components-library'
2
3// const app = createApp(App)
4app.component('fa-icon', FontAwesomeIcon)
5// app.mount('#app')

To import styles, add this line to your main.js.
This file bundles Bootstrap styles, Fontawesome styles and global styles for any Mstaff Vue 3 project.

1import '@hublo/mstaff-components-library/dist/style.css'

If you want to make SCSS variables accessible globally to your project, add this configuration to your vite.config.js.

1// vite.config.js
2
3export default defineConfig({
4	// ...
5	css: {
6		preprocessorOptions: {
7			scss: {
8				additionalData: `
9                @import '/node_modules/@hublo/mstaff-components-library/src/assets/styles/variables/_variables.scss';
10                `
11			}
12		}
13	}
14})

!!! If you want to modify global styles, override some Bootstrap variables or add some Fontawesome icons, please do it in this @hublo/mstaff-components-library project, not in your project !!!