Based on a https://github.com/storyblok/nuxt-ultimate-tutorial and combines the recommandations from storyblok and my own suggestions. Used as a way to debug storyblok issues in nuxt3.
The template is deployed to netlify here: https://storyblok-nuxt-ultimate-template.netlify.app/
Changes from nuxt-ultimate-tutorial:
- yarn instead of npm - Advantages with yarn
- Coverts the project into Typescript - Advantages with a typed language, Nuxt with typescript
- Updated package scripts according to nuxt recommendations - Nuxt3 Commands
- Storyblok CLI support - storyblok CLI on github
- Eslint support and my recommended rules - nuxt3 typescript eslint, typescript eslint, airbnb eslint rules
- Router middleware to redirect to path with trailing slash - Forcing trailing slash for netlify
- Updated
[...slug].vuewithuseAsyncStoryblokand better route handling - useAsyncStoryblok as suggested method for pulling async data, route handling with proper preview mode - Attempts to improve tailwind intellisense - Recommended extension and setting from 2022
- Updated AllArticles to improve prerendered support - Using useAsyncData to store data in application
- Disables clicks in live editor - bridge options
- Adds a custom async storyblok fetch composable that has proper error handling - Throw 404 error if story was not found, Adds a check for errors on useAsyncStoryblok to prevent errors from gettting to clients.
- Adds a custom server middleware api to obscure the fetching, but still being fully supported by the custom async fetch.
- vue.volar - Vue language support recommended by nuxt3
- Vue.vscode-typescript-vue-plugin - Typescript support for volar
- bradlc.vscode-tailwindcss - vscode tailwind css support
- octref.vetur - Not recommended for Typescript
- vscode.typescript-language-features - Built in support typescript support not recommended when using volar
Either use the create your own copy link from storyblok/nuxt-ultimate-tutorial or you can use the storyblok cli.
How to set up storyblok-nuxt-ultimate-template with Storyblok CLI:
- Login to Storyblok CLI in your command line while in the project directory (make sure you have run
yarn installfirst) -yarn storyblok login
- Create a new Storyblok Space -
yarn storyblok quickstart
- Grab your new storyblok space id -
yarn storyblok spaces - Push the nuxt-ultimate-tutorial components to your new Storyblok space -
yarn storyblok push-components --space {your-space-id} storyblok/components.json - Remove all the components that does not belong to nuxt-ultimate-tutorial -
yarn storyblok delete-components storyblok/components.json --space {your-space-id} --reverse - ???
- You are now ready to create content in Storyblok