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

Nicolas Pennec · Accepted Answer · 2021-01-07 08:50:10Z

2

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

answered Jan 7, 2021 at 8:50

Nicolas Pennec

7,62131 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T00rk Over a year ago

I've tried this as well but I get the same issue.

Nicolas Pennec Over a year ago

We need more details to understand your error at this step. Can you share your project on github or codesandbox to reproduce the issue and check your source code?

Collectives™ on Stack Overflow

Nuxtjs import vue component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related