Как определить геолокацию пользователя и вывод данных Nuxt.js + Laravel?

Question

[Nubbb]

Подскажите, есть фронтенд на Nuxtjs и бэкенд на Laravel

Вроде пришел к использованию google maps api(но не уверен)

Как перед загрузкой сайта определить город пользователя

Нужно будет вывести в шапке название города и перед загрузкой записать например данные геолокации в localStorage(или кэш) и вывести данные на сайте(успеть отправить на api Laravel) по этому городу

Comments

[Владислав Лысков]

отвечаю на вопрос из комментов

в папке plugins создаёшь новый плагин

export default async function (context) {
  await context.$axios.post(process.env.API_URL + '/api/...')
    .then(response => (context.store.commit('products/add', response.data)))
}

регистрируешь его в nuxt.config.js

plugins: [
    {src: '~/plugins/name.js'},
  ],

он у тебя выполнится ДО рендера приложения
в плагине ты отправляешь запрос на апи, забираешь\разбираешь ответ
и используешь, в моём примере я получаешь продукты и отправляю их в стор

store/name.js

export const state = () => ({
  list: {}
})

export const mutations = {
  add(state, product) {
    state.list = product
  }
}

и получаю где угодно
{{ $store.state.products.list }}

Answer 1

[Алексей Скляров]

Detect location and local timezone of users in Jav...
Detect User’s Location Like A Pro Using Vue.js

ну и еще с десяток статей, которые вы можете найти в Google.

Comments

[Nubbb]

последний вариант я видел с vue, но вопрос в том, что есть задержка, то есть сайт открылся и через несколько сек сработало определение lat и lng, вопрос как это все сделать до момента загрузки контента?

[Владислав Лысков]

Nubbb, в наксте это делается в плагинах

[Nubbb]

Владислав Лысков, а можно пример или подробнее как это реализовать?

[Алексей Скляров]

Nubbb, у вас же есть диаграмма жизненного цикла Vue. Никто из нас не знает в какой момент вы пытаетесь грузить контент, но я полагаю, что метод, определяющий геолокацию пользователя должен вызываться в created() или mounted()

[SM_ST]

Алексей Скляров, я пробовал так, но страница загружвется и с задержкой проиcходит определение navigator.geolocation то есть страница загрузилась и через секунду вывел на странице координаты

а нужно до показа содержимого страницы определить координаты и сделать запрос на бэк