App

# やりたいこと rails + vue で作成したアプリにVuetifyを導入したい # レベル感 railsである程度実装できるようになったのでフロントをリッチにしようと2週間くらいvueを触った程度 # 環境 - rails:5.2.1 - ruby:2.6.1 - node:12.10.0 - vue(npm):vue@2.6.10 - vuetify(npm):vuetify@2.0.17 # Vuetifyの読み込みでやっていること - /aboutにアクセスした時にAboutっていうコンポーネントを読み込む。その`About.vue`の中で試しにアラートを表示しようと思った。 - ソースは以下 - [githubはコチラのfeature-vuetifyブランチ](https://github.com/yosuke0517/rails-vue) ```html //application.html.erbでcdn読み込み App <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= yield %> ``` ```js //todo.jsで読み込み import Vue from 'vue/dist/vue.esm.js' import Header from './components/header.vue' import Router from './router/router' import Vuetify from 'vuetify' Vue.use(Vuetify); var app = new Vue({ router: Router, el: '#app', components: { 'navbar': Header, } }); ``` ```js //route.js import Vue from 'vue/dist/vue.esm.js' import VueRouter from 'vue-router' import Index from '../components/index.vue' import About from '../components/about.vue' import Contact from '../components/contact.vue' Vue.use(VueRouter) export default new VueRouter({ mode: 'history', routes: [ { path: '/', component: Index }, { path: '/about', component: About }, { path: '/contact', component: Contact }, ], }) ``` ```Vue //About.vue ``` # エラー内容コンソールを確認すると - `[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` - `[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> at app/javascript/packs/components/about.vue ` - `[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> at app/javascript/packs/components/about.vue ` ![イメージ説明](6067aa4cbc41bcb6068e5a89b8b79228.jpeg) ### `Unknown`と言われているので設定がおかしいのだろうけどググっても出てこない... ### ご指摘をお願いします。

	@@ -1 +1 @@
1	- Rails + Vue~~(Vuetify)~~でVuetifyの~~コンポーネント~~が表示できない
1	+ Rails + VueでVuetifyの導入ができない

質問編集履歴