Vue.jsでv-calendarを使いたいが、Uncaught ReferenceError:が出てしまう

Question

前提・実現したいこと

Vue.jsでv-calendarを使って日付選択フォームを作成したいです。

https://www.kabanoki.net/3905/
を参考に作成しようとしています。

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

npmでv-calendarをインストールしたはずが、<v-date-picker>が読み込まれなかったため
正しくプロジェクトにパッケージがインストールされているかを確認するために、

npm list v-calendar

を実行したところ

taskcapsule@0.1.0 /Users/usename/Desktop/taskcapsule
└── UNMET DEPENDENCY v-calendar@1.0.0-beta.22 

npm ERR! missing: v-calendar@1.0.0-beta.22, required by taskcapsule@0.1.0

と出ました。なので、

npm install v-calendar@1.0.0-beta.22

を行ったところパッケージは確認できたのですが、
グーグルの検証の画面では下記のエラーが出てしまいます。

Uncaught ReferenceError: Vue is not defined
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/packs/components/about.vue?vue&type=script&lang=js& (about.vue:9)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/components/about.vue?vue&type=script&lang=js& (about.vue?8ebb:1)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/components/about.vue (about.vue:1)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/router/router.js (router.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/todo.js (todo.js:1)
    at __webpack_require__ (bootstrap:19)

###ソースコード

実際に日付選択フォームを作成しているコンポーネントのvueファイルの中身です。

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

<script>
import VCalendar from 'v-calendar';
Vue.use(VCalendar);
Vue.config.productionTip = false

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

エラーの内容が読み解けず行き詰まってしまいました...
よろしくお願いします。

追記

import Vue from 'vue/dist/vue.esm.js'
import Router from './router/router'
import Header from './components/header.vue'

import VCalendar from 'v-calendar';
Vue.use(VCalendar);
Vue.config.productionTip = false


var app = new Vue({
  el: '#app',
  router: Router,
  components:{
      'navbar':Header,
  }
});

Answer 1

エラー内容通りVueが定義されてないのが原因かと
vueファイルのようなのでimport Vue from 'vue';のようにVueを定義してるところがあると思いますのでそこで

import VCalendar from 'v-calendar';
Vue.use(VCalendar);
Vue.config.productionTip = false

をすればよいかと

※載せているソースで全角スペースが入ってるようです

※parcelで確認したときのソース
index.js

import Vue from 'vue/dist/vue.esm.js';
import MyApp from './MyApp.vue';

import VCalendar from 'v-calendar';
Vue.use(VCalendar);
Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: {
    MyApp,
  },
  template: '<my-app></my-app>',
});

MyApp.vue

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

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

---

追記

vue/cliでvue.js+typescriptプロジェクト作って結局こうなった
main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// tslint:disable-next-line:no-var-requires
const VCalendar = require('v-calendar');
// v-calendarのlib.jsにあるinstall関数そのまま持ってくる
const defaults = VCalendar.setupCalendar({});
Object.keys(VCalendar).forEach((k) =>
  Vue.component(`${defaults.componentPrefix}${k}`, VCalendar[k]),
);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

※import使った際のError出てても結局は動くっぽい…typeエラーとして出してるだけかも

Comments

[hana00033]

vueファイルの中でimportせずに追記に書かせていただいたような指定の仕方もしたのですが、VSコード側で
module "/Users/usename/Desktop/taskcapsule/node_modules/v-calendar/lib/v-calendar.umd.min"
モジュール 'v-calendar' の宣言ファイルが見つかりませんでした。'/Users/username/Desktop/taskcapsule/node_modules/v-calendar/lib/v-calendar.umd.min.js' は暗黙的に 'any' 型になります。
Try `npm install @types/v-calendar` if it exists or add a new declaration (.d.ts) file containing `declare module 'v-calendar';`ts(7016)
と出てしまうのですがこれは正しくインストールされてないということでしょうか？
定義をしたはずなのに使えないという状況が続いています...

[rururu3]

それに関してはtypescriptの制約かもしれません…v-calenderがtype script対応されてるかわかりませんが、
https://qiita.com/Nossa/items/726cc3e67527e896ed1e
や
https://codeday.me/jp/qa/20190616/1024476.html
ここらへんの設定とかになるかもしれません(TypeScriptの意味がなくなるかもしれませんが…

[hana00033]

まだまだ初心者でtypescriptを理解できていませんが、
https://teratail.com/questions/197203
ここでVScode側の問題で、保存して開き直したらなおったとあったので試しにやってみたところ、VScodeのエラーは消えませんでしたが、もともと出ていたconsoleのエラーはなくなってカレンダーが表示できていました。追記に書いていただいたのをみてVScode側はtypeエラーを出していたのか！と思いましたが、カレンダーがなぜ正しく表示できたのかは全く理解できてません...
でも動いたので良しとします...(･_･;
本当にご協力ありがとうございました。

Answer 2

Vue is not definedとあるのでVueが定義されていません。
たいていエラー文は最初の一行目に原因が書いてあるので読むようにしましょう。

先日似たような問題に回答をしたのでご参照ください。
Vue.jsで日付選択フォームを作成したい - teratail

公式の導入方法などにも目を通しておくと良いと思います。
V-Calendar - Installation