Как правильно установить Vuetify for Rails? - PullRequest
Новая
       10

Как правильно установить Vuetify for Rails?

0 голосов
/ 02 декабря 2018

Ошибка JavaScript: 

[Vuetify] Multiple instances of Vue detected
See https://github.com/vuetifyjs/vuetify/issues/4068

If you're seeing "$attrs is readonly", it's caused by this
consoleError @ vuetify.js:22001
install @ vuetify.js:16239
Vue.use @ vue.esm.js:4751
install @ vuetify.js:17943
Vue.use @ vue.esm.js:4751
(anonymous) @ application.js:22
__webpack_require__ @ bootstrap 0e105d68ff80c96169ef:19
(anonymous) @ bootstrap 0e105d68ff80c96169ef:62
(anonymous) @ bootstrap 0e105d68ff80c96169ef:62

Попытка:

  • Импорт из 'vue' вместо из 'vue / dist/vue.esm 'как предложено в этом выпуске github .Это вызывает другую проблему (сборка только для времени выполнения для vue без разбора шаблона)

Подробности:

У меня есть приложение Rails, где я хотел бы создатьнавигационный ящик, использующий Vuetify <v-navigation-drawer>.В соответствии с кратким руководством Vuetify , я установил, используя $ npm install vuetify --save.Затем для проверки функциональности я использовал их собственный пример в одном из моих отдельных файловых компонентов:

Шаблон 

<!-- app/javascript/navigation-drawer.vue -->
<template>
    <div id="nav-drawer">
        <v-navigation-drawer permanent>
            <v-toolbar flat>
                <v-list>
                    <v-list-tile>
                        <v-list-tile-title class="title">
                           Application
                        </v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-toolbar>

            <v-divider></v-divider>

            <v-list dense class="pt-0">
                <v-list-tile
                    v-for="item in items"
                    :key="item.title"
                    @click=""
                >
                   <v-list-tile-action>
                       <v-icon>{{ item.icon }}</v-icon>
                   </v-list-tile-action>

                   <v-list-tile-content>
                       <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
        </v-navigation-drawer>
    </div>
</template>

<script>
   export default {
       data () {
           return {
               items: [
                { title: 'Home', icon: 'dashboard' },
                { title: 'About', icon: 'question_answer' }
            ],
            right: null
        }
    }
}

Main application.js 

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import BootstrapVue from 'bootstrap-vue'
import Vuetify from 'vuetify'
import NavigationDrawer from '../navigation-drawer.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(TurbolinksAdapter)
Vue.use(BootstrapVue)
Vue.use(Vuetify)

Vue.component('navigation-drawer', NavigationDrawer)

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '[data-behavior="vue"]'
  })
})

NPM vuetify version 

$ npm list vuetify
barber-ranks@ /path/to/app/barber-ranks
└── vuetify@1.3.11

NPMvue version 

$ npm list vue
barber-ranks@ /path/to/app/barber-ranks
├── vue@2.5.17 
└─┬ vue-turbolinks@2.0.3
  └── vue@2.5.17

Обратите внимание , что этот проект rails использует как npm, так и yarn для управления пакетами узлов.Я не уверен, может ли это создать конфликт.

1 Ответ

0 голосов
/ 02 декабря 2018

Обнаруженный в этой проблеме , вы можете разрешить путь Vue и заставить экземпляр Vuetify работать с Vue.

В вашем config > webpack > environment.js добавьте: 

const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')

environment.loaders.append('vue', vue)

const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
environment.config.merge(resolver)

module.exports = environment

Вjavascript> application.js, теперь вы можете импортировать Vue и Vuetify без ошибок: 

import Vue from 'vue'
import Vuetify from 'vuetify'
...