Question

我是nuxt的新手，我开始与implementation 'com.google.firebase:firebase-auth:16.0.5'一起使用它。实际上，我想实现Google地方信息自动填充功能，并且发现了这一点：vuetify-google-autocomplete。它看起来非常好，易于实现。但事实并非如此。

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

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

plugins

我在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

结果是什么都不起作用！：D 我得到的是：

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

我尝试使用SyntaxError Unexpected identifier Missing stack frames ...etc...，将插件nuxt.config.js设置为ssr。它不会那样失败，它会加载页面，但是还有许多其他问题与false组件未加载有关。

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

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使用外部组件的问题

2 个答案: