Nuxtjs import vue component

Question

I'm new to nuxtjs and I'm trying to import a vue component to nuxt.

I'm using vuetify on my project, and I want to use this plugin https://vuejsexamples.com/date-range-picker-for-vuetify-js/ which is a daterange-picker.

I've added the component using npm .

My nuxt.config.js looks like this:

...

// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
  { src: '~/node_modules/vuetify-daterange-picker/dist/vuetify-daterange-picker.css' }
],

// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [

],

// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,

// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
  // https://go.nuxtjs.dev/eslint
  //'@nuxtjs/eslint-module',
  // https://go.nuxtjs.dev/vuetify
  '@nuxtjs/vuetify',
  '~/node_modules/vuetify-daterange-picker'
],

// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
  // https://go.nuxtjs.dev/axios
  '@nuxtjs/axios',
  // https://go.nuxtjs.dev/pwa
  '@nuxtjs/pwa',
  // https://go.nuxtjs.dev/content
  '@nuxt/content',
],

// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},

// Content module configuration (https://go.nuxtjs.dev/config-content)
content: {},
...

When I run my project I've got this error in the browser

And this error in the terminal

Answer 1

Don't import manually the component from "node_modules".

You have to create a new Nuxt "plugin" to import and init your vue component in Nuxt:

// plugins/your-component.js

import VuetifyDaterangePicker from "vuetify-daterange-picker";
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";

Vue.use(VuetifyDaterangePicker);

// nuxt.config.js

export default {
  plugins: ['~/plugins/your-component.js'],
  // ...
}

see docs: https://nuxtjs.org/docs/2.x/directory-structure/plugins#vue-plugins

---

Another way is to use the nuxt vuetify-module : https://github.com/nuxt-community/vuetify-module