Как установить плагин в Nuxt.js?

Не могу понять в чем проблема.
Все делал по докам
Сам плагин

1. Папка plugins
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)


2. Конфиг nuxt.config.js
module.exports = {
  build: {
    vendor: ['vuetify']
  },
  plugins: [

    '~plugins/vuetify'
  ]
}

3. Файл приложения Index.vue
<template>
  <div class="container">
    <v-alert success>Работай бл*ть!</v-alert>
  </div>
</template>

<script>
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)

export default {
  mounted () {
    vuetify.init()
  }
}
</script>


Может его нужно как-то инициализировать в файле приложений? В доках установил его глобально и про инициализацию ни слова.
Спасибо.
  • Вопрос задан
  • 5584 просмотра
Решения вопроса 1
petrovnr
@petrovnr Автор вопроса
Господа, сам нашел ответ убив 3 дня)
1. Vuetify не поддерживается в Nuxt.js
2. Поддерживается ElementUI

Инструкция как установить:
3.0) npm install element-ui -S

3.1) nuxt.config.js
module.exports = {
    plugins: ['~plugins/element-ui.js'],


3.2) ~plugins/ekement-ui.js
import Vue from 'vue'

const ElementUI = require('element-ui')
const locale = require('element-ui/lib/locale/lang/ru-RU')
Vue.use(ElementUI, {local)} // если вставить global ничего не меняется, пока я не понял почему так


3.3 ~pages/index.vue
<template>
<div>
    <el-row>
        <el-col :span="24">
            <el-button>Default Button</el-button>
            <el-button type="primary">Primary Button</el-button>
            <el-button type="text">Text Button</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-input-number v-model="num1" :min="1" :max="10"></el-input-number>
        </el-col>
    </el-row>
</div>
</template>

<script>
export default {
    layout: 'teub',
    data() {
        return {
            num1: 1
        }
    }
}
</script>

<style>
body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    padding-top: 50px;
}

.el-row {
    padding: 10px;
    text-align: center;
}
</style>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
yoj_nc
@yoj_nc
Junior web developer
Для подключения плагина надо

1. Создать файл под подключение в папке plugins/
2. Подключить файл плагина в nuxt.config.js

p.s. используйте подключение в конструкции
if (!Vue.prototype.plugin) {
  Vue.use(plugin)
}


Подключение в nuxt.config.js
module.exports = {
  plugins: [
    '~plugins/validator.js',
    '~plugins/lodash.js'
  ]
... остальные настройки
}


Пример подключения сторонней библиотеки адаптированной под vue :

import Vue from 'vue'
import lodash from 'lodash'
import VueLodash from 'vue-lodash/dist/vue-lodash.min'
if (!Vue.prototype._) {
  Vue.use(VueLodash, lodash)
}


Пример подключения своего плагина:
import _ from 'lodash'
import Vue from 'vue'

export const validator = (Vue) => {
  Vue.validator = {
    applyErrors: {
      inputs (inputs, errors = {}) {
        _.forEach(inputs, (input) => {
          input.error = ''
          if (errors[input.name]) {
            input.error = errors[input.name][0]
          }
        })
        return inputs
      }
    }
  }
  // Подключаем для вызова с любой точки объекта Vue в контексте this
  if (!Vue.prototype.$validator) {
    Object.defineProperties(Vue.prototype, {
      $validator: {
        get: () => {
          return Vue.validator
        }
      }
    })
  }
}

Vue.use(validator)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы