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

Question

[Никита Петров]

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

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>

Может его нужно как-то инициализировать в файле приложений? В доках установил его глобально и про инициализацию ни слова.

Answer 1

[Никита Петров]

Господа, сам нашел ответ убив 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>

Comments

[Alex]

В данный момент, Vuetify прекрасно работает на nuxt

[goju]

Да, более того, чуть ли не официально рекомендуется :) Но его надо использовать полностью, нету возможности юзать компоненты.

Answer 2

[Сергей Ананьев]

Для подключения плагина надо

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)