回答編集履歴

1 typescriptで試したのを載せておく

rururu3

rururu3 score 5454

2019/11/27 12:28  投稿

エラー内容通り`Vue`が定義されてないのが原因かと
vueファイルのようなので`import Vue from 'vue';`のように`Vue`を定義してるところがあると思いますのでそこで
```js
import VCalendar from 'v-calendar';
Vue.use(VCalendar);
Vue.config.productionTip = false
```
をすればよいかと
※載せているソースで全角スペースが入ってるようです
※parcelで確認したときのソース
index.js
```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
```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
```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エラーとして出してるだけかも

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る