Страница только в браузере в Nuxt

Личный кабинет, редактор черновика или панель, где всё завязано на localStorage, часто не имеет смысла на сервере: данных там нет, а лишний HTML только усложняет ответ. Такой маршрут можно пометить правилом ssr: false: Nuxt отдаст минимальную оболочку, а Vue смонтирует страницу уже в браузере.

Давайте разберём адрес /account. В routeRules укажем отключение серверного рендеринга:

export default defineNuxtConfig({
	routeRules: {
		'/account': { ssr: false },
	},
});

Файл страницы при этом обычный. При первом заходе на /account в исходном HTML не будет готового текста из шаблона: содержимое появится в браузере после загрузки JavaScript:

<script setup>
	const name = ref('Guest');
</script>
<template>
	<h1>
		Account
	</h1>
	<p>
		Hello, {{ name }}
	</p>
</template>

Сделайте страницу настроек по адресу /settings, которая рендерится только в браузере.

Сделайте страницу черновика заметки по адресу /draft с тем же режимом, без серверного HTML для шаблона.