Installation

npm install buntpapier

Add to build chain

Buntpapier needs to be compiled with babel, pug, stylus and used with stylus.

Example vue-cli config

module.exports = {
	transpileDependencies: ['buntpapier'],
	configureWebpack: {
		module: {
			rules: [
				{
					test: /\.pug$/,
					loader: 'pug-plain-loader'
				}
			]
		},
	},
	css: {
		loaderOptions: {
			stylus: {
				use: [require('buntpapier/stylus')()]
			}
		}
	}
}

Also buntpapier needs at least @babel/plugin-proposal-optional-chaining.

For example via a babel.config.js:

module.exports = {
	presets: [
		'@vue/app'
	],
	plugins: [
		["@babel/plugin-proposal-optional-chaining", { "loose": false }],
		["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }]
	]
}

Load buntpapier into vue

import Buntpapier from 'buntpapier'
import Vuelidate from 'vuelidate' // if you want validation
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Buntpapier)
Vue.use(Vuelidate)

Load buntpapier into your projects stylus style

Example main.styl (only needed once)

$clr-primary = $clr-green

variables()
normalize-css()
base()
typography()
components()
scrollbars()