やりたいこと

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ブランチ

html
1//application.html.erbでcdn読み込み
2<html>
3  <head>
4    <title>App</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
8    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
9    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
10    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
11  </head>
12  <body>
13    <%= yield %>
14  </body>
15</html>

js
1//todo.jsで読み込み
2import Vue from 'vue/dist/vue.esm.js'
3import Header from './components/header.vue'
4import Router from './router/router'
5import Vuetify from 'vuetify'
6
7Vue.use(Vuetify);
8
9var app = new Vue({
10  router: Router,
11  el: '#app',
12  components: {
13      'navbar': Header,
14    }
15});

js
1//route.js
2import Vue from 'vue/dist/vue.esm.js'
3import VueRouter from 'vue-router'
4import Index from '../components/index.vue'
5import About from '../components/about.vue'
6import Contact from '../components/contact.vue'
7
8Vue.use(VueRouter)
9
10export default new VueRouter({
11  mode: 'history',
12  routes: [
13    { path: '/', component: Index },
14    { path: '/about', component: About },
15    { path: '/contact', component: Contact },
16  ],
17})
18

Vue
1//About.vue
2<template>
3  <v-app>
4    <v-alert type="success">
5      I'm a success alert.
6    </v-alert>
7    <div>
8    <!-- 内容はお好みで -->
9    <p>This is a sample of TODO application with Vue.js and Ruby on Rails.</p>
10    <p>Sample code is <a href="https://github.com/naoki85/todo_app_with_vue_and_rails" target="_blank">here.</a></p>
11  </div>
12  </v-app>
13</template>
14

エラー内容

コンソールを確認すると

`[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: <vapp> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in
---> <About> at app/javascript/packs/components/about.vue
<Root>`

`[Vue warn]: Unknown custom element: <v-alert> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in
---> <About> at app/javascript/packs/components/about.vue
<Root>`