Nuxtjs 导入 vue 组件

Question

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

当我运行我的项目时，我在浏览器中遇到了这个错误

终端中的这个错误

Answer 1

不要从“node_modules”手动导入组件。

你必须创建一个新的 Nuxt“插件”来在 Nuxt 中导入和初始化你的 vue 组件：

// 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