Run:
yarn add @adminkitas/nuxt2-devkit
or
npm i @adminkitas/nuxt2-devkit
Create a a file called style.scss
in the folder /assets/styles
.
Add the code:
@import '@adminkitas/nuxt2-devkit/assets/styles/fonts/gineto.css';
@import '@adminkitas/nuxt2-devkit/assets/styles/fonts/remixicon';
@import '@adminkitas/nuxt2-devkit/assets/styles/style';
Add the style to be inserted to the entire project:
css: ['@/assets/styles/style.scss']
To utilize the nuxt components, add this line to your plugins
config block:
plugins: [
{ src: '~/node_modules/@adminkitas/nuxt2-devkit/index.js', mode: 'client' }
]
To make buefy render the components as we want them to look like, add this block:
buefy: {
css: false,
materialDesignIcons: false,
defaultButtonRounded: true,
defaultIconPack: 'remixicon',
customIconPacks: {
remixicon: {
sizes: {
default: '',
'is-small': 'ri-sm',
'is-medium': 'ri-lg',
'is-large': 'ri-xl'
},
iconPrefix: 'ri-',
internalIcons: {
check: 'check-line',
information: 'information-line',
'check-circle': 'checkbox-circle-line',
alert: 'alert-line',
'alert-circle': 'error-warning-line',
'arrow-up': 'arrow-up-line',
'chevron-right': 'arrow-right-s-line',
'chevron-left': 'arrow-left-s-line',
'chevron-down': 'arrow-down-s-line',
'chevron-up': 'arrow-up-s-line',
eye: 'eye-line',
'eye-off': 'eye-off-line',
'menu-down': 'arrow-down-s-line',
'menu-up': 'arrow-up-s-line',
plus: 'add-line',
minus: 'subtract-line'
}
}
}
Moment.js comes with the package and is required to get the components to work.
buildModules:['@nuxtjs/moment']
plugins: [
{ src: '~/node_modules/@adminkitas/nuxt2-devkit/plugins/moment.js', mode: 'client' }
]
i18n somes with the package and is required when using the components.
modules:['@nuxtjs/i18n']
plugins: [
{ src: '~/node_modules/@adminkitas/nuxt2-devkit/plugins/validation_i18n.js', mode: 'client' }
]
i18n: {
langDir: 'locales/',
lazy: true,
strategy: 'prefix',
locales: [
{ code: 'en', name: 'English', file: 'en/en.js', iso: 'en-GB' },
{ code: 'no', name: 'Norsk', file: 'no/no.js', iso: 'no-NB' }
// you need to create these language files in the locales/ folder in your application
],
defaultLocale: process.env.DEFAULT_LANG, // Make sure that this variable is available from CI/CD.
vueI18n: {
fallbackLocale: 'en'
},
detectBrowserLanguage: {
fallbackLocale: 'en',
cookieKey: 'app_language'
}
}
From @/node_modules/@adminkitas/nuxt2-devkit/
copy the folders .vscode
& static
into your own project
The package comes with a couple of extra widly used plugins:
plugins: [
{ src: '~/node_modules/@adminkitas/nuxt2-devkit/plugins/feature.js', mode: 'client' },
// To verify if a feature is available
{ src: '~/node_modules/@adminkitas/nuxt2-devkit/plugins/toast.js', mode: 'client' }
// A shortcut plugin for using the buefy toast
]