0.2.27 • Published 2 years ago

@hublo/mstaff-components-library v0.2.27

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

mstaff-components-library

coverage-branches coverage-functions coverage-lines coverage-statements

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

0.1.118

2 years ago

0.1.117

2 years ago

0.1.119

2 years ago

0.1.114

2 years ago

0.1.113

2 years ago

0.1.116

2 years ago

0.1.115

2 years ago

0.1.112

2 years ago

0.1.111

2 years ago

0.1.129

2 years ago

0.1.128

2 years ago

0.1.125

2 years ago

0.1.124

2 years ago

0.1.127

2 years ago

0.1.126

2 years ago

0.1.121

2 years ago

0.1.120

2 years ago

0.1.123

2 years ago

0.1.122

2 years ago

0.1.139

2 years ago

0.1.136

2 years ago

0.1.135

2 years ago

0.1.138

2 years ago

0.1.137

2 years ago

0.1.132

2 years ago

0.1.131

2 years ago

0.1.134

2 years ago

0.1.133

2 years ago

0.1.130

2 years ago

0.1.147

2 years ago

0.1.146

2 years ago

0.1.149

2 years ago

0.1.148

2 years ago

0.1.143

2 years ago

0.1.142

2 years ago

0.1.145

2 years ago

0.1.144

2 years ago

0.1.141

2 years ago

0.1.140

2 years ago

0.1.107

2 years ago

0.1.106

2 years ago

0.1.109

2 years ago

0.1.108

2 years ago

0.1.103

2 years ago

0.1.102

2 years ago

0.1.105

2 years ago

0.1.104

2 years ago

0.1.101

2 years ago

0.1.55

2 years ago

0.1.56

2 years ago

0.1.57

2 years ago

0.1.58

2 years ago

0.1.59

2 years ago

0.2.27

2 years ago

0.2.26

2 years ago

0.2.25

2 years ago

0.2.24

2 years ago

0.2.23

2 years ago

0.2.22

2 years ago

0.2.21

2 years ago

0.2.20

2 years ago

0.2.19

2 years ago

0.2.18

2 years ago

0.2.17

2 years ago

0.2.16

2 years ago

0.2.15

2 years ago

0.2.14

2 years ago

0.2.13

2 years ago

0.2.12

2 years ago

0.2.11

2 years ago

0.2.10

2 years ago

0.1.96

2 years ago

0.1.97

2 years ago

0.1.98

2 years ago

0.1.99

2 years ago

0.1.90

2 years ago

0.1.91

2 years ago

0.1.92

2 years ago

0.1.93

2 years ago

0.1.94

2 years ago

0.1.95

2 years ago

0.1.158

2 years ago

0.1.157

2 years ago

0.1.159

2 years ago

0.1.154

2 years ago

0.1.153

2 years ago

0.1.156

2 years ago

0.1.155

2 years ago

0.1.150

2 years ago

0.1.152

2 years ago

0.1.151

2 years ago

0.1.85

2 years ago

0.1.86

2 years ago

0.1.87

2 years ago

0.1.88

2 years ago

0.1.89

2 years ago

0.1.80

2 years ago

0.1.81

2 years ago

0.1.82

2 years ago

0.1.83

2 years ago

0.1.84

2 years ago

0.1.169

2 years ago

0.1.168

2 years ago

0.1.165

2 years ago

0.1.164

2 years ago

0.1.167

2 years ago

0.1.166

2 years ago

0.1.161

2 years ago

0.1.160

2 years ago

0.1.163

2 years ago

0.1.74

2 years ago

0.1.75

2 years ago

0.1.170

2 years ago

0.1.76

2 years ago

0.1.77

2 years ago

0.1.78

2 years ago

0.1.79

2 years ago

0.1.70

2 years ago

0.1.71

2 years ago

0.1.72

2 years ago

0.1.73

2 years ago

0.1.175

2 years ago

0.1.172

2 years ago

0.1.171

2 years ago

0.1.174

2 years ago

0.1.173

2 years ago

0.1.63

2 years ago

0.1.64

2 years ago

0.1.65

2 years ago

0.1.66

2 years ago

0.1.67

2 years ago

0.1.68

2 years ago

0.1.69

2 years ago

0.1.60

2 years ago

0.1.61

2 years ago

0.1.62

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.9

2 years ago

0.2.8

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.1.53

2 years ago

0.1.54

2 years ago

0.1.52

2 years ago

0.1.50

2 years ago

0.1.51

2 years ago

0.1.49

2 years ago

0.1.30

2 years ago

0.1.31

2 years ago

0.1.32

2 years ago

0.1.33

2 years ago

0.1.35

2 years ago

0.1.36

2 years ago

0.1.37

2 years ago

0.1.27

2 years ago

0.1.28

2 years ago

0.1.41

2 years ago

0.1.42

2 years ago

0.1.20

2 years ago

0.1.43

2 years ago

0.1.21

2 years ago

0.1.44

2 years ago

0.1.22

2 years ago

0.1.45

2 years ago

0.1.23

2 years ago

0.1.46

2 years ago

0.1.24

2 years ago

0.1.47

2 years ago

0.1.25

2 years ago

0.1.48

2 years ago

0.1.26

2 years ago

0.1.40

2 years ago

0.1.38

2 years ago

0.1.19

2 years ago

0.1.18

2 years ago

0.1.17

2 years ago

0.1.16

2 years ago

0.1.15

2 years ago

0.1.14

2 years ago

0.1.13

2 years ago

0.1.12

2 years ago

0.1.10

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago