Nuxt integration about vue-places HOT 17 CLOSED

@melliott03,
Did you registered the vue-place in a separate file and imported on plugins: [] within the nuxt.config file?

I registered using Vue.component:

// vue-places.js

import Vue from 'vue';
import VuePlaces from 'vue-places';

Vue.component('VuePlaces', VuePlaces);
 

Then import on plugins with the tag ssr= false

// nuxt.config.js

plugins: [
	{ src: '~plugins/vue-places', ssr: false }
],

This resolved the problem with unexpected token. The only problem that I'm facing now is this component itself, for no reason, seems to reloading when I change the steps in my stepper component (in my case) and crash the styles and functionalityes

You can type but the functionality reloaded and crashes.

I can't spend too much time with this problem, but I will try to help with something.

from vue-places.

Thanks for getting back to me on this! I registered the plugin in nuxt.config.js as you did. It works but when I reload, I am now experiencing the same problem as you with the style and functionality crashing.

from vue-places.

BTW I have found out that there is a difference between this Places Geolation data only returns geocoordinates at the street level, not the house level. I need house level geolocation data so I will be looking at implementing a different solution such as Google.

from vue-places.

Has anyone been able to integrate with Nuxt? The plugin works fine when I navigate to the page but breaks when I refresh the page.

from vue-places.

Okay, now it works on page reload if I wrap it in tags

from vue-places.

I'm having this reload issue yet, but works when the component want to work haha

Which tags do you mean?

from vue-places.

Here's my setup:

I use the tag and that seems to do the trick. The no-ssr Component

<template>
  <no-ssr placeholder="Loading...">
    <div>
      <places
        v-model="form.country.label"
        placeholder="Where are we going ?"
        @change="val => { form.country.data = val }"
        :options="{ countries: ['US'] }"
      ></places>
      <div>{{form.country.data.latlng}}</div>
    </div>
  </no-ssr>
</template>

from vue-places.

Oh, I see! I will try this <no-ssr>.

Edit: Didn't work, but I will se in dept now

Thanks!

from vue-places.

Yep, that's Nuxt.

from vue-places.

Are you importing the vue-place within the component too?

from vue-places.

//in vue-places.js

import Vue from 'vue';
import VuePlaces from 'vue-places';

Vue.component('places', VuePlaces);

//in nuxt.config.js
 plugins: [
    { src: '~/plugins/vue-places', ssr: false },
  ]

from vue-places.

Alright, like I did, but it's working every time that you reload?

from vue-places.

@melliott03 You already solve this reload problem? Here still persists when I reload for the third time, weird! hahaha

from vue-places.

@melliott03 You already solve this reload problem? Here still persists when I reload for the third time, weird! hahaha

@mfcarneiro It works everytime I reload...can you share what you have in your
vue-places.js
nuxt.config.js
component .vue

from vue-places.

@melliott03 It's the same config that you've showed

I did a computed property instead to have this val => { object.data = val }, only difference...

from vue-places.

@melliott03,

Just for the record, I'm using the vue2-googlemaps autocomplete functionality. It use s the google API and maybe fits to your needs of "house level".

from vue-places.

Fixed in v2 3e4c8bb

from vue-places.