Блог

Я новичок в nuxtjs и пытаюсь импортировать компонент vue в nuxt.

Я использую vuetify в своем проекте, и я хочу использовать этот плагин https://vuejsexamples.com/date-range-picker-for-vuetify-js / который является средством выбора диапазона дат.

Я добавил компонент с помощью npm .

Мой nuxt.config.js выглядит так :

 ...

// 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: {},
...
 

Когда я запускаю свой проект, у меня появляется эта ошибка в браузере

И эта ошибка в терминале

Не импортируйте компонент вручную из «node_modules».

Вам необходимо создать новый «плагин» Nuxt для импорта и инициализации вашего компонента vue в 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'],
  // ...
}

 

смотрите Документы: https://nuxtjs.org/docs/2.x/directory-structure/plugins#vue-plugins

Другой способ — использовать nuxt vuetify-module : https://github.com/nuxt-community/vuetify-module