Home>

i want to use v-calendar with vuejs, but i get uncaught referenceerror:

I want to create a date selection form using v-calendar with Vue.js.

https://www.kabanoki.net/3905/
I am trying to create it with reference.

Error message

V-calendar should have been installed with npm, butwas not loaded
To make sure that the package is correctly installed in the project,

npm list v-calendar
[email protected]/Users/usename/Desktop/taskcapsule
└── UNMET DEPENDENCY [email protected]
npm ERR! missing: [email protected], required by [email protected]


I came out. So

npm install [email protected]


I was able to confirm the package, but
The following error appears on the Google verification screen.

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)
Source code

The contents of the vue file of the component that actually creates the date selection form.

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

I'm stuck with an error that I couldn't understand ...
Thank you.

Append 
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,
  }
});
vue.js
  • Answer # 1

    MaybeVueis not defined as the error description
    Since it looks like a vue file, I think there is a place whereVueis defined likeimport Vue from 'vue';

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


    * It looks like there are full-width spaces in the source you put

    * Source when confirmed by 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: '',
});

    MyApp.vue
    Append

    After creating a vue.js + typescript project withvue/cli, this was done like this
    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');
// Bring the install function in lib-js of v-calendar as it is
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');

    ※ Even if an error occurs when import is used, it seems that it will eventually move ... It may only be a type error

  • Answer # 2

    Vue is not definedIs not defined.
    In most cases, you should read the error statement because the cause is written on the first line.

    Please refer to a similar question that was answered the other day.
    I want to create a date selection form in Vue.js-StackOverflow

    I think you should take a look at the official introduction methods.
    V-Calendar-Installation

Related articles