Выяснил, что ошибка возникает при обращении к state this.$auth.loggedIn:
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render.
Файл страницы Vue следующего содержания:
<template>
<div v-if="loggedIn" >
...
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'NavBar',
computed: {
...mapState('auth', ['loggedIn', 'user'])
}
}
</script>
<style></style>
После успешной авторизации перемещаюсь по всем страницам проекта без ошибок, но как только обновляю страницу браузером, появляется описанная ошибка выше.
На странице
https://auth.nuxtjs.org/api/auth.html#properties указано:
Все свойства являются реактивными. Это означает, что вы можете безопасно использовать их в v-if условиях шаблона Vue .
Т.е. если я правильно понимаю, то можно обращаться к стейту и так:
<div v-if="this.$auth.loggedIn" >
...
</div>
Но и в этом случае тоже появляется ошибка.
Подскажите, пожалуйста, в чем проблема?
