@adminkitas/nuxt2-devkit v2.12.5

@adminkitas/nuxt2-devkit

How to setup

Run:

yarn add @adminkitas/nuxt2-devkit

or

npm i @adminkitas/nuxt2-devkit

Assets

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';

nuxt.config.js

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:

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:

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'
  }
}

Environmental setup

From @/node_modules/@adminkitas/nuxt2-devkit/ copy the folders .vscode & static into your own project

Available plugins

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
  ]