Почему в Nuxt js в исходном коде страницы не отображается контент?

Question

[Shurik]

Добрый день. Переделываю проект vue на nuxt js для индексирования страниц поисковиками. Перенес главную страничку и обнаружил, что в ее исходном коде до сих пор нет контента, а только подключение скриптов! Что я могу упускать?

Answer 1

[Дмитрий Кузнецов]

Что я могу упускать?

SSR

Comments

[Shurik]

в конфиге стоит mode: 'universal',

Создал ща другую страницу для теста - там все ок.
Не ОК на проблемной странице может из за того, что там подключен файл с объектом для мультиязычности. Т.е. с бэкенда приходит параметр языка и в зависимости от него с этого файла с переводом подгружается переменная в шаблоне: var[lang].
Может из-за асинхронности вся эта борода?

Answer 2

[Shurik]

Посмотрел поподробнее за поведением, выяснилось, что не отражается контент из подключенных в компонент других компонентов.
Например в компонент я импортирую другой и уже в этом импортированном вместо контента отображаются просто теги вида <h3 data-v-34777841></h3> без содержимого!

upd:
В общем nuxt упорно не хочет видеть какие либо импортированные данные, например другой компонент. Не знаю с чем это связано((

Answer 3

[Александр Дергунов]

Код в студию.

Comments

[Shurik]

Путем экспериментов мне удалось выяснить следующее. Дополняю подробности, ниже приведу код.
Мое приложение имеет мультиязычность(рус и англ). Значение языка, параметры приложения и меню берется из бэкенда методом getMenu() в хранилище. Есть файлы переводов, которые я подключаю к компонентам и в зависимости от языка вывожу либо рус либо анг версию некой строки. Если в компоненте просто выводить переменные компоненты, то они нормально рендерятся сервером. Но в моем случае почему то компонента отрисовывается до того, как будет получено меню, и соответственно язык приложения, а следовательно и все зависимые данные от этого. Мучался с fetch в default.vue и случайным образом у меня началась рендериться страница как надо, т.е. с учетом данных бэкэенда, от которых зависит отрисовка других элементов. В default.vue отделил код комментариями со звездочками, после добавления которого все завелось, но в этом не вижу никакой логики. Если сможете объясните пожалуйста!
Что имеем:
store/index.js

//import axios from 'axios'

export const state = () => ({
  lang: '',
  error: {},
  message: {},
  entry:{
    nav: {
      brandLabel: {},
      brandUrl: '',
      menu: [],
    },
    userRole: '',
    appParams:{
      organization:{},
      country:{},
    }
  }
})

export const mutations = {
  setLang(state, lang) {
    state.lang=lang;
  },
  clearError(state){
    //state.error=Object.assign({});
    //if ("message" in state.error)
    state.error={};
  },
  clearMessage(state){
    state.message={};
  },
  setBrandLabel(state, val){
    state.entry.nav.brandLabel = val
  },
  setBrandUrl(state, val){
    state.entry.nav.brandUrl = val
  },
  setMenu(state, val){
    state.entry.nav.menu = val
  },
  setUserRole(state, val){
    state.entry.userRole = val
  },
  setOrganization(state, val){
    state.entry.appParams.organization = val
  },
  setCountry(state, val) {
    state.entry.appParams.country = val
  },
}

export const actions = {
  async getMenu({state, commit, $axios }){
    await this.$axios.get('menu')
      .then(response=>{
        //console.log(response.data)
        let d = response.data;
        commit('setBrandLabel', d.brandLabel)
        commit('setBrandUrl', d.brandUrl)
        commit('setMenu', d.menu)
        commit('setLang', d.lang)
        commit('setUserRole', d.userRole)

        commit('setOrganization', d.appParams.organization)
        commit('setCountry', d.appParams.country)

        //console.log(state.entry)
        return Promise.resolve(d.lang);

      })
      .catch(e => {
        state.error = e.response;

      });
    }
}

export const getters = {
  lang: state => state.lang,
  userRole: state => state.entry.userRole,
  error(state){
    if ((state.error instanceof Object) && ('message' in state.error)){
      return ('name' in state.error) ? `${state.error.name}. ${state.error.message}`.split(';') : state.error.message.split(';');
    }
    else if (JSON.stringify(state.error)=='{}' || state.error=='')
      return false;
    return [state.error];
  },
  message(state){
    if(JSON.stringify(state.message)=='{}' || state.message=='') {
      return false;
    } else return state.message;
  },
}

layouts/default.vue

<template>
  <div id="app">
    <Navbar :nav="entry.nav" :lang="lang" />
    <main>
      {{test}}
      <div class='container'>
        <Nuxt />
      </div>
    </main>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
import {mapState, mapActions} from 'vuex'
import axios from 'axios'

export default {
  components: {
    Navbar
  },
  data(){
    return {
      test: '',
    }
  },
  watch: {
    '$route' (to, from) {
        if (to.path.search(/^\/language/)>-1)  {
          this.changeLanguage(to,from);
        }
        this.$store.commit('clearError');
      },
  },
  computed: {
    ...mapState(['lang', 'entry']),
  },
  methods: {
    ...mapActions(['getMenu']),
    changeLanguage(to, from){
			this.$router.replace(from.path);
			if (this.lang!=to.params.lang)
			{
				this.setLang(to.params.lang);
				this.sendLang(to.path);
			}
		},
		sendLang(path){
      axios.put(path)
        .catch(e=>{
          this.$store.dispatch('setError', e);
      });
		},
    setLang(lang){
			this.$store.commit('setLang', lang);
		},
  },

//***************************************  после добавления этого кода начинает рендериться как надо
  async fetch() {
    const t = await fetch('http://localhost:8000/menu').then(res =>
      res.json())
  },
  asyncData() {
      return {
        name: 'Alex',
        food: 'apple'
      }
    },
//*********************************конец странного и непонятного кода

  created(){
    this.getMenu()
  },
}
</script>

pages/index.vue

<template>
  <div class="home">
    <h1>front page</h1>
    <img alt="Vue logo" class='front-logo' src="../assets/logo-front.png">
    <FrontGuest v-if="userRole == 'roleGuest'" :msg = "voc.h1[lang]"/>
    <FrontUser v-if="userRole == 'roleUser' || userRole == 'roleAdmin'" :msg = "voc.h1[lang]"/>
    <div class="generate"></div>
  </div>
</template>

<script>
import FrontGuest from '@/components/FrontPage/FrontGuest.vue'
import FrontUser from '@/components/FrontPage/FrontUser.vue'
import translations from '@/components/FrontPage/translations';

export default {
  components: {
    FrontGuest, FrontUser
  },
  data(){
    return {
      name: 'Home',
      voc: translations,
    }
  },
  head: {
    title: 'Home page',
 
  data() {
    return {
      voc: translations,
    }
  },
  computed: {
    lang(){
      return this.$store.getters.lang;
    },
    userRole() {
      return  this.$store.getters.userRole;
    },
  },
}
</script>