@hublo/mstaff-components-library NPM | npm.io

0.2.27 • Published 6 months ago

Install

Weekly downloads

-

License

-

Repository

Last release

6 months ago

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

@vueup/vue-quill @vueuse/core bootstrap bootstrap-vue-next detect-browser lodash lodash.debounce pinia quill-paste-smart validator vue vue-i18n vue-multiselect vue-router vue-skeletor vue-toastification

@everything-registry/sub-chunk-404

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

8 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

12 months ago

12 months ago

12 months ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago