使用带有 nuxt 的外部组件的问题答案

【问题标题】：issues using external components with nuxt使用带有 nuxt 的外部组件的问题
【发布时间】：2019-05-19 13:38:02
【问题描述】：

我是 nuxt 的新手，我开始将它与 vuetify 一起使用。实际上我想实现一个谷歌地方自动完成功能，我发现了这个：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 项目中使用这些插件/组件。谢谢

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

我认为你必须添加 transpile 构建选项，因为 vuetify-google-autocomplete 使用 ES6 模块。详情请见ES6 plugins。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：