Failed to resolve component: datepicker

[benhtn]

Sorry in advance if this is just because I don't understand vue3 enough and how to use node modules. I am trying to create my first Vue 3 app - I have this in my package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "jquery": "^3.6.0",
    "pace": "^0.0.4",
    "popper.js": "^1.16.1",
    "vue": "^3.0.0",
    "vue-plugin-load-script": "^2.0.1",
    "vue-router": "^4.0.0-0",
    "vue3-datepicker": "^0.2.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }
}

this in main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Datepicker from 'vue3-datepicker'

console.log(Datepicker); //this gives the Datepicker object I'd expect

createApp(App).use(router).mount('#app');

and this kind of thing in my Test.vue

<template>
          <datepicker
              v-model="picked"
          />
</template>

<script>
import { ref } from 'vue'
export default {
  name: "Test",
  data() {
    return {
      picked: ref(new Date())
    }
  }
}
</script>

All I am getting is a runtime warning [Vue warn]: Failed to resolve component: datepicker at <Test onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App> and the component doesn't show up.

Is it just that I am doing something wrong? Thank you

[icehaunter]

Hello!

Yes, you're doing a thing wrong here: you need to actually tell Vue you're going to use the component. You can do it either globally:

import Datepicker from 'vue3-datepicker'
createApp(App)
  .component('datepicker', Datepicker)
  .mount('#app');

or locally:

<script>
import { ref } from 'vue'
import Datepicker from 'vue3-datepicker'

export default {
  components: {
    Datepicker
  }
}
</script>

Either should fix this error, but I recommend the second option. To learn more, take a look at the docs.