質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

Rails + VueでVuetifyの導入ができない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 766

sanezane

score 85

やりたいこと

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の読み込みでやっていること

//application.html.erbでcdn読み込み
<html>
  <head>
    <title>App</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  </head>
  <body>
    <%= yield %>
  </body>
</html>
//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,
    }
});
//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 },
  ],
})
//About.vue
<template>
  <v-app>
    <v-alert type="success">
      I'm a success alert.
    </v-alert>
    <div>
    <!-- 内容はお好みで -->
    <p>This is a sample of TODO application with Vue.js and Ruby on Rails.</p>
    <p>Sample code is <a href="https://github.com/naoki85/todo_app_with_vue_and_rails" target="_blank">here.</a></p>
  </div>
  </v-app>
</template>

エラー内容

コンソールを確認すると

  •  [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>

イメージ説明

Unknownと言われているので設定がおかしいのだろうけどググっても出てこない...

ご指摘をお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • 8zca

    2019/09/18 00:29

    このへんは参考になりませんか?
    https://gist.github.com/zapad7715/9ff593d87f1a040f9129565d024f8a95

    キャンセル

  • sanezane

    2019/09/19 07:15

    ありがとうございます。aliasを設定してvueとして読みこむということでしょうか?一旦そのように組んでみましたが事象変わらずです。。。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる