Installation
The NOBEARS Nuxt Storyblok template is a template that is used to create a new Storyblok based Nuxt project. It is a good starting point for creating a new Storyblok based Nuxt project that follows our coding standards, release process and more.
Nuxt setup
Clone the template in your desired location
git clone https://git.nobears.nl/nobears-front-end/templates/nuxt-storyblok.git
Remove cloned git repository
rm -rf .git
Add project to desired git repository
git init --initial-branch=main
git remote add origin <your-git-repository>
Create .env file
Create a new .env file with preset keys, using the following command:
cp .env.example .env
Add your Storyblok access token
You can find your access token in the Storyblok dashboard: Settings > Configuration > Access Tokens
Add the access token to the .env file:
NUXT_STORYBLOK_DELIVERY_API_TOKEN=<your-storyblok-delivery-api-token>
Configure the template
We recommend you to do the following:
- Update the package.json file with your project details.
- Decide which format of the css you want to use.
Add your first commit
git add .
git commit -m "chore(template): added NOBEARS Nuxt Storyblok template"
git push --set-upstream origin main
Storyblok preview mode
Install mkcert
Install mkcert for creating a valid certificate (Mac OS).
brew install mkcert
mkcert -install
mkcert localhost
Install proxy
Install and run the proxy.
npm install -g local-ssl-proxy
# Run https on port 3010 and forward requests to http 3000
local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem
Update visual editor url
In Storyblok, update the url of which the visual editor should use to show the preview of your content.
Go to Settings > Configuration > Visual editor and update the Location (default environment) field to the following:
https://localhost:3010/