CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Ayeye Brazo
Ayeye Brazo

Reputation: 3476

issues using external components with nuxt

I'm new to nuxt and I started using it together with vuetify. Actually I wanted to implement a Google Places Autocomplete and I have found this: vuetify-google-autocomplete. It looks very nice and easy to implement. But it doesn't.

What I did is to follow exactly the documentation.

I created a file called google-autocomplete.js in the plugins folder:

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

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

In the nuxt.config.js I registered it like that:

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

Finally in my .vue file I did:

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

Down in the script section I created a test method:

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

The result is that nothing work! :D What I'm getting is:

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

I tried to play with the nuxt.config.js, setting the plugin ssr to false. It doesn't fail like that, it load the page but there are tons of other issues related to vuetify components not loaded.

What I wanted to understand is how should I use these plugins/components in a nuxt project. Thanks

Upvotes: 0

Views: 1850

Answers (2)

rvmourik
rvmourik

Reputation: 1

In addition to the answer of above, if you are facing this while writing your own plugin with a dependency to an external package. You could choose to write a Nuxt module instead of a plugin. This way you can add the plugin code and transpile settings in one go instead of manually adding this (and potentially forget) to nuxt.config.js

Upvotes: 0

User 28
User 28

Reputation: 5158

I think you have to add transpile build option since vuetify-google-autocomplete use ES6 module. Please see ES6 plugins for more about detail.

So your nuxt.config.js should be:

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

Upvotes: 3

Related Questions