Vue.jsで日付選択フォームを作成したい

Question

前提・実現したいこと

Vue.jsで日付選択フォームを作成したいです。

https://www.kabanoki.net/3905/
このサイトを参考に作成したのですが、エラーが出て表示されなくなってしまいます。

発生している問題・エラーメッセージ

[Vue warn]: Unknown custom element: <v-date-picker> - 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>

該当のソースコード

<template>
  <v-date-picker :mode="mode"
               :formats="formats"
               v-model="selectedDate"></v-date-picker>
</template>

<script>
import Vue from 'vue';
import VCalendar from 'v-calendar';
Vue.use(VCalendar);

export default{
  data: function(){
    return{
    mode: 'single',
    formats: {
        input: ['YYYY-MM-DD'],
    },
    selectedDate: null,
    }
  }
}


</script>

https://www.kabanoki.net/3890/
このサイトを参考にnpmでv-calendarをインストール済みです。
何が原因かわからなくて困っています...
よろしくお願いします。

Comments

[nt4c]

実装しようとしているのはNuxt.jsですか？それとも通常のvueですか？

[hana00033]

通常のvueです！vueとrailsのapiを使ってWebアプリケーションを作成しようとしてます。

Answer 1

エラー内容を見る限りv-date-pickerが正しく読み込まれていないようです。
こちらの記事を参考に修正してみてはどうでしょうか。
Vue.jsのカレンダライブラリv-calendarを使って、日付ごとのデータをカレンダー上に表示 - qiita