![SaaSup Preview](https://private-user-images.githubusercontent.com/16530588/258243602-df265948-6a98-43ab-a58e-b05464ed21f0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg1ODM3ODIsIm5iZiI6MTcxODU4MzQ4MiwicGF0aCI6Ii8xNjUzMDU4OC8yNTgyNDM2MDItZGYyNjU5NDgtNmE5OC00M2FiLWE1OGUtYjA1NDY0ZWQyMWYwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE3VDAwMTgwMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQwZWI5NDcyMDZiM2E0OWZlODA1OTdhZGE2MjVmMzZjYjI2NTIyNzlkOTY2NzVhYmM5MTc2ZGRkNzFjYWU1OGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qpOnguvY2wlFG_MTcbgli8S2b4DS95DfUlZRMRGaPgA)
Check out the live demo of SaaSup at https://saaasup.vercel.app.
Click the button below to open the project in StackBlitz for preview and experimentation:
Feel free to explore the code, make changes, and see the results in real-time!
Make sure to install the dependencies:
# pnpm
pnpm install
Storyblok v2 requires your app to be served via HTTPS. Please follow the steps below to enable this in a Nuxt 3 project.
-
Install
mkcert
on your system: The installation instructions for macOS, Windows and Linux can be found in the mkcert Github repository. -
Change the following in your package.json:
nuxt dev
->NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem
-
Create a valid certificate by running the following command in your project folder:
mkcert localhost
IMPORTANT: Add this to your project’s to gitignore
# HTTPS Proxy certificates
localhost.pem
localhost-key.pem
- Install the Storyblok CLI:
npm i -g storyblok
- Login using storyblok login in your terminal
- In your project directory, save the schema of your Storyblok components in a
.json
file by runningstoryblok pull-components --space SPACE_ID
- Install storyblok-generate-ts:
pnpm add -D storyblok-generate-ts
- Add the following command to your package.json:
"generate-sb-types": "storyblok-generate-ts source=./components.[SPACE_ID].json target=./component-types-sb"
- Generate the types:
pnpm generate-sb-types
- Import the type in each component, for example:
import type { PageStoryblok } from '../component-types-sb'
- Remember to rerun the
pull-components
andgenerate-sb-types
scripts after you’ve made changes to your component schema in your Storyblok space
Please refer to the documentation of Storyblok CLI and storyblok-generate-ts for advanced use cases, customization options, and more.
Start the development server on http://localhost:3000
pnpm dev
Build the application for production:
pnpm build
Locally preview production build:
pnpm preview
Check out the deployment documentation for more information.
Special thanks to VictorFlow for the fantastic design that served as an inspiration for this project.