Zenn
Open5

Nuxt3 を試してみてつまったところ

TypeScript
Vue 3
Nuxt 3
yukiko_bassyukiko_bass

https://reffect.co.jp/vue/nuxt3/#component-name

default.vue
<template>
	<div>
		<Navbar />
		<slot />
	</div>
</template>

nav/Navbar.vue を用意。components/Navbar2.vue にrename

エラーになってnav/Navbar.vue が読み込まれない😕

[Vue warn]: Failed to resolve component: Navbar                        12:26:43 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[12:26:43 PM] [Vue warn]: Component <Anonymous> is missing template or render function.
yukiko_bassyukiko_bass

AutoImports がされないだけで、importを明示的に書いた場合は読まれる

default.vue
<script setup lang="ts">
import Navbar from '@/components/nav/Navbar.vue';
</script>
yukiko_bassyukiko_bass

サーバ側での createError の実行
別のページからリンクを利用して/users/list にアクセスした場合はクライアント側で処理が行われるため フルスクリーンの画面ではなく NuxtErrorBondary で設定したエラーの内容が表示されます。

直接URLアクセスだとerror.vueに飛ぶのは確認できるけど、NuxtErrorBoundary を users.vue に記述しても、画面が表示されない（画面が更新されない）

users.vue
<template>
	<h1>Usersページ</h1>
	<p>Count2:{{ counter }}</p>
	<p>Count3:{{ counter3 }}</p>
	<NuxtErrorBoundary>
		<NuxtPage />
		<template #error="{ error }">
			<p>{{ error }}</p>
			<button @click="resetError(error)">Clear Error</button>
		</template>
	</NuxtErrorBoundary>

<script setup>
const counter = useState('counter');
const counter3 = useCounter2();

const resetError = (error) => {
	error.value = null;
};
const someErrorLogger = (error) => {
	//取得したエラーで別の処理を行う
	console.log('someErrorLogger', error);
};
</script>
</template>
users/listError.vue
<script setup>
const { data: users } = await useFetch(
	'https://jsonplaceholder.typicode.com/user/'
);
console.log('process');
if (!users.value) {
	throw createError({ statusCode: 404, statusMessage: 'Page Not Found' });
}
</script>
<template>
	<div>
		<h1>ユーザErrorリスト</h1>
		<ul>
			<li v-for="user in users" :key="user.id">{{ user.name }}</li>
		</ul>
	</div>
</template>