在 nuxt 中使用外部组件的问题

Question

我是 nuxt 的新手，我开始将它与 vuetify 一起使用。实际上我想实现一个 Google Places Autocomplete，我发现了这个：vuetify-google-autocomplete。它看起来非常好并且易于实现。但事实并非如此。

我所做的就是严格按照文档进行操作。

我在 plugins 文件夹中创建了一个名为 google-autocomplete.js 的文件：

import Vue from 'vue'
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: 'MY_KEY'
})

在nuxt.config.js中我是这样注册的：

plugins: ['@/plugins/vuetify', '@/plugins/google-autocomplete'],

最后在我的 .vue 文件中我做了：

<template>
  <vuetify-google-autocomplete
    id="map"
    append-icon="search"
    disabled="true"
    placeholder="Start typing"
    @placechanged="getAddressData"
  ></vuetify-google-autocomplete>
</teamplate>

在 script 部分我创建了一个测试方法：

methods: {
  getAddressData: (addressData, placeResultData, id) => {
    console.log(addressData, placeResultData, id)
  }
}

结果是没有任何效果！ :D 我得到的是：

SyntaxError
Unexpected identifier
Missing stack frames
...etc...

我尝试使用 nuxt.config.js，将插件 ssr 设置为 false。它不会像那样失败，它会加载页面，但还有大量与未加载的 vuetify 组件相关的其他问题。

我想了解的是我应该如何在nuxt项目中使用这些plugins/components。谢谢

Answer 1

我认为您必须添加 transpile 构建选项，因为 vuetify-google-autocomplete 使用 ES6 模块。有关详细信息，请参阅 ES6 plugins。

所以你的 nuxt.config.js 应该是：

export default {
  build: {
    transpile: ['google-autocomplete']
  },
  plugins: [
    '@/plugins/vuetify',
    '@/plugins/google-autocomplete'
  ]
}

Answer 2

除了上述答案之外，如果您在编写自己的依赖于外部包的插件时遇到此问题。您可以选择编写 Nuxt 模块而不是插件。通过这种方式，您可以一次性添加插件代码和转译设置，而不是手动将其添加（并可能忘记）到 nuxt.config.js

在 nuxt 中使用外部组件的问题

issues using external components with nuxt

javascript

vue.js

nuxt.js