https://github.com/storyblok/blueprint-core-nuxt
Storyblok core space blueprint for Nuxt
https://github.com/storyblok/blueprint-core-nuxt
blueprint port-3000 storyblok
Last synced: 3 months ago
JSON representation
Storyblok core space blueprint for Nuxt
- Host: GitHub
- URL: https://github.com/storyblok/blueprint-core-nuxt
- Owner: storyblok
- Created: 2025-04-10T22:09:23.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-07-07T10:43:25.000Z (3 months ago)
- Last Synced: 2025-07-07T11:39:32.509Z (3 months ago)
- Topics: blueprint, port-3000, storyblok
- Language: Vue
- Homepage: https://app.storyblok.com
- Size: 261 KB
- Stars: 1
- Watchers: 11
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Storyblok Core Space Blueprint: Nuxt
Integrate [Nuxt](https://nuxt.com/) with [Storyblok](http://www.storyblok.com) as a headless CMS.
This blueprint is ideal for kickstarting new Storyblok and Next.js projects. What's inside:
- Pre-configured default blocks: `page`, `teaser`, `grid`, and `feature`.
- Support for the Visual Editor's live preview.
- Dynamic routing to fetch and render new stories automatically.
- Minimal styling.
> [!TIP]
> Follow our [Nuxt guide](LINK) for a step-by-step walkthrough and learn more about Storyblok's range of features, including rich text rendering, custom content modeling, and internationalization. See the [@storyblok/nuxt package reference](https://storyblok.com/docs/packages/storyblok-nuxt) for further information.
***
[](https://github.com/codespaces/new?skip_quickstart=true&machine=basicLinux32gb&repo=962644002&ref=main&geo=EuropeWest)
[](https://app.storyblok.com/#/signup)
[](https://storyblok.com/join-discord)
## Get Started
**No Storyblok account yet? [Sign up now](https://app.storyblok.com/#/signup?utm_source=docs) to experience a 14-day free trial of all features and enjoy our completely free Starter plan.**
1. Create an empty new Storyblok space
2. Create a new repository based on this template
3. Open the project on your device
4. Install dependencies
```sh
npm install
```
### Authentication
In the root of the project, create a `.env` file to store the access token of your space:
```sh
STORYBLOK_DELIVERY_API_TOKEN=
```
> [!TIP]
> Copy your space's preview access token from **Settings** > **Access Tokens**.
> Learn more about Storyblok [access tokens](https://www.storyblok.com/docs/concepts/access-tokens).
### Connect the Visual Editor
To render a preview of the local project in the Visual Editor, follow these steps:
1. In your space, navigate to **Settings > Visual Editor**.
2. Set the default environment to `https://localhost:3000/`.
3. Save.
4. Open the `home` story.
5. Click **Config**.
6. Type `/` in the **Real path**.
Run the development server:
```sh
npm run dev
```
> [!IMPORTANT]
> To connect the Storyblok Visual Editor, the local project must run over HTTPS. Learn more in the [Visual Editor concept](https://www.storyblok.com/docs/concepts/visual-editor#local-development-via-https). See the [Visual Preview part of the Nuxt guide](https://storyblok.com/docs/guides/nuxt/visual-preview) for detailed instructions.
Back in Storyblok, open the **Home** story to start editing.
Happy building!
## Resources
- To learn more about what you can do with Storyblok, visit [our documentation and learning hub](https://www.storyblok.com/docs).
- To learn more about the integration between Storyblok and Nuxt, check our [dedicated developer tutorials](https://www.storyblok.com/tutorials?technologies=nuxt).
- To learn more about Nuxt, check the [official documentation](https://nuxt.com/docs).
### Support
- Have questions, need help, want to chat with other users? [Join our Discord community](https://storyblok.com/join-discord).
- Visit the Storyblok [Help Center](https://support.storyblok.com/hc/en-us).