mstaff-components-library

Mstaff design system

Documentation

Installation to a new vue 3 project

Install from NPM

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

npm i unplugin-vue-components -D

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// unplugin-vue-components
import Components from 'unplugin-vue-components/vite'
import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
	plugins: [
		vue(),
		Components({
			resolvers: [BootstrapVueNextResolver()]
		})
	]
})

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.

{
	"dependencies": {
		"bootstrap-vue-next": "*"
	}
}

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.

import { FontAwesomeIcon } from '@hublo/mstaff-components-library'

// const app = createApp(App)
app.component('fa-icon', FontAwesomeIcon)
// 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.

import '@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.

// vite.config.js

export default defineConfig({
	// ...
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `
                @import '/node_modules/@hublo/mstaff-components-library/src/assets/styles/variables/_variables.scss';
                `
			}
		}
	}
})

!!! 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 !!!