Just starting with nuxt and incorporating it with vuetify.
My aim was to integrate a Google Places Autocomplete feature, so I stumbled upon this: vuetify-google-autocomplete. It seemed simple enough to implement. But turns out it's not that straightforward.
I closely followed the documentation provided.
Created a file named google-autocomplete.js in the plugins directory:
import Vue from 'vue'
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'
Vue.use(VuetifyGoogleAutocomplete, {
apiKey: 'MY_KEY'
})
In the nuxt.config.js, I added it like this:
plugins: ['@/plugins/vuetify', '@/plugins/google-autocomplete'],
Lastly, in my .vue file, I included:
<template>
<vuetify-google-autocomplete
id="map"
append-icon="search"
disabled="true"
placeholder="Start typing"
@placechanged="getAddressData"
></vuetify-google-autocomplete>
</teamplate>
In the script section, I defined a test method:
methods: {
getAddressData: (addressData, placeResultData, id) => {
console.log(addressData, placeResultData, id)
}
}
The outcome? Everything is a mess! :D I'm encountering:
SyntaxError
Unexpected identifier
Missing stack frames
...etc...
Even tweaking the nuxt.config.js and setting the plugin ssr to false didn't prevent the failures, albeit the page loads but numerous issues arise with vuetify components not initializing.
Trying to grasp the right approach in employing these plugins/components within a nuxt project. Any insights are appreciated. Thanks