BaseModule

Base - Модуль для подключения основных переменных и плагинов приложения

Nuxt install

// nuxt.config.js

const palette = {
  white: '#fff',
  blue: '#01de'
};

export default {
  modules: [
    ['shared-front/nuxt/base', {
      stage: 'dev',
      blocks: [
        {
         prefix: 'custom',
         active: ({ mode }) => mode !== 'custom'
        },
      ],
      colors: {
        primary: {
          text: palette.white,
          bg: palette.blue,
          alert: {
            text: palette.blue,
          },
        }
      },
    }],
  ],
};

Module options

colors

• type: Record<string, Color>
• default: null

Конфигурация основных цветов приложения. Далее данный объект доступен так же по алиасу #runtime/shared-front/colors.json и $colors переменной из stylus. Список названий цветов доступен по алиасу #runtime/shared-front/color-names.json

stage

• type: 'prod' | 'dev' | 'local' | 'stage'
• default: 'prod'

Мод разработки, далее превращается в process.env.EDU_STAGE и process.env.STAGE

icons

• type: boolean
• default: true

Подключение стилей иконок font-awesome

palette

• type: Record<string, string>
• default: null

Палитра цветов. Далее данный объект доступен так же по алиасу #runtime/shared-front/palette.json и $p, $pallete переменным из stylus.

baseCss

• type: boolean
• default: true

Подключение переменных src/styles/base.styl

patchRoute

• type: boolean
• default: true

Исправление route с целью синхронизации с текущей страницей

stripBlocks

• type: Array<{ prefix: string; active: boolean | ({ mode: string; isVue2: boolean; isVue3: boolean; isServer: boolean; isClient: boolean; }) => boolean }>
• default: []

Блоки для задания удаляемых сборщиком частей кода.

  /* VUE2-ONLY.START */
  import Vue from 'vue';

  const app = new Vue({});
  /* VUE2-ONLY.END */

  // SERVER-ONLY.NEXT-LINE
  import { jsdom } from 'jsdom';

  // PROD-ONLY.NEXT-LINE
  console.log('prod message');

  // PROD-EXCEPT.NEXT-LINE
  console.log('except prod message');

  export default (html:string) => {
    if (process.server) {
      return new jsdom(html).document;
    } else {
      return new DomParser().parseFromString(html, 'text/html')
    }
  }

  // SERVER-ONLY.NEXT-LINE
  import { jsdom } from 'jsdom';

  // PROD-EXCEPT.NEXT-LINE
  console.log('except prod message');

  export default (html:string) => {
    if (process.server) {
      return new jsdom(html).document;
    } else {
      return new DomParser().parseFromString(html, 'text/html')
    }
  }

<template>
  <div>
    <template
      v-for="n in 10"
      v-bind="$vue3Key(`foo-${n}`)"
    >
      <span v-bind="$vue2Key(`1-${n}`)">
        1
      </span>

      <span v-bind="$vue2Key(`2-${n}`)">
        2
      </span>
    </template>
  </div>
</template>