still valid with vue

[robbiemu]

I'm getting:

vue.runtime.esm.js?a427:563 [Vue warn]: Failed to mount component: template or render function not defined. 
(found in <Datepicker>)

here's my package.json dependencies:

  "dependencies": {
    "@websanova/vue-auth": "^2.8.2-beta",
    "axios": "^0.15.3",
    "vee-validate": "^2.0.0-beta.25",
    "vue": "^2.1.10",
    "vue-axios": "^2.0.1",
    "vue-material-datepicker": "^2.0.1",
    "vue-router": "^2.2.0",
    "vue-server-renderer": "^2.1.10",
    "vuetify": "^0.8.9",
    "vuex": "^2.1.2",
    "vuex-router-sync": "^4.1.2"
  },

and I mount it with:

<template>
  <!-- stufff and: -->
  <div name="dob"><datepicker orientation="landscape" /></div>
</template>
<script>
import Datepicker from 'vue-material-datepicker'

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

export default {
  props: ['crud', 'id'],
  components: { datepicker: Datepicker },

ps> I tried aliasing in vue: 'vue/dist/vue.js' in my webpack config and it is still breaking

[bastienGranger]

Hi, Try this to import Datepicker

Vue.component('Datepicker', require('vue-material-datepicker/src/Datepicker.vue'));

[robbiemu]

I did try that but it had issues finding its dependencies, both external and in the src directory. But if that would work, or not, the main one should work either with vue or vue/dist/vue if you ask me

[ArnoldGitHub]

I have the exact same issue, @robbiemu , do you have solution yet?

[Levgenij]

same problem. And need to fix readme: $ npm install vue-material-datepicker instead $ npm install vue-datepicker

[robbiemu]

@arnoldgithub no actually I moved on. I can get it to load but the calendar doesn't look right.

To load it: 1 import the source component:

  import DatePicker from 'vue-material-datepicker/src/Datepicker.vue'

2 set up your project to handle scss as a style language specification. In your webpack config, add options to your .vue file handler, to conform to the pattern:

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
        // vue-loader options
          loaders: {
            scss: 'style-loader!css-loader!sass-loader'
          }
        }
      },
...

Optionally, also support .scss files while you're there:

      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      }

3. you may need to npm i -D node-sass, but I think all the current templates have it now.
4. npm i -S moment moment-range too
5. notice that the input appears, but the calendar doesnt / or looks completely wrong.