Please include 404 error handling, static generation and showing draft only when in editor

[codeflorist]

I've been bashing my head into my monitor hours and days on end getting a Nuxt3 application to work without problems with:

• dynamic storyblok routes using [...slug].vue
• generated static pages
• working 404 error handling
• storyblok using published version publicly and draft version only when in editor.

please include these features in your tutorial.

[codeflorist]

i think i've found a solution, that is working quite well. here is my [...slug].vue:

<script lang="ts" setup>
onMounted(() => {
	if (!story.value && !isInStoryblokEditMode) {
		showError({ statusCode: 404, statusMessage: 'Page Not Found' })
	}

	if (isInStoryblokEditMode) {
		story.value = draftStory.value
		useStoryblokBridge(story.value.id, (evStory) => (story.value = evStory))
	}
})
const route = useRoute()

const story = ref(null)
const draftStory = ref(null)
const storyblokApi = useStoryblokApi()

const isInStoryblokEditMode = !!route.query?._storyblok

const isDev =
	typeof process !== 'undefined' && process.env.NODE_ENV === 'development'

const storyVersion = isInStoryblokEditMode || isDev ? 'draft' : 'published'

const currentStoryPath =
	route.path === '/' || route.path === '' ? 'home' : route.path.substr(1)

if (isInStoryblokEditMode) {
	const tmpDraftStory = await useStoryblok(currentStoryPath, {
		version: 'draft',
	})
	draftStory.value = tmpDraftStory.value
} else {
	const { data } = await useAsyncData(
		currentStoryPath,
		async () =>
			await storyblokApi.get(`cdn/stories/` + currentStoryPath, {
				version: storyVersion,
			})
	)
	story.value = data.value?.data.story
}
</script>

<template>
	<StoryblokComponent v-if="story" :blok="story.content" />
</template>

[Dawntraoz]

Hi @codeflorist, thank u so much for pushing this! What a needed part 🤯

I'm so happy to tell you that I'm writing the last UT article on the deployment of a Nuxt app, I'm trying to exemplify 3 workarounds: static with same domain from preview, SSG (Universal) and 2 separate environments preview & prod (different tokens in Nuxt module config).

For now, the static and SSR workarounds are already developed at: https://github.com/storyblok/nuxt-ultimate-tutorial/tree/part-7/pages. I hope this helps to make the approach even simpler. I will love to show you in a call if you want to gave us feedback or discuss the workarounds 💜

[SebbeJohansson]

Eyyyy! @Dawntraoz that looks amazing! I'll look at copying that stuff into my repos when that is done!

[Dawntraoz]

Merged Part-7 into main