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!
To set up the project, make sure to install the dependencies:
# Install dependencies with pnpm
pnpm install
Storyblok v2 requires your app to be served over HTTPS. Follow these steps to enable HTTPS in a Nuxt 3 project:
-
Install mkcert Install mkcert on your system. The installation instructions for macOS, Windows, and Linux can be found in the mkcert GitHub repository.
-
Generate the certificate Run the following command in your project folder to create a valid SSL certificate:
mkcert localhost
-
Add the certificates to .gitignore Ensure that the certificates are ignored in version control by adding the following lines to your .gitignore file:
# HTTPS Proxy certificates localhost.pem localhost-key.pem
-
Modify your package.json Update the nuxt dev script as follows:
"scripts": { "dev": "nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem" }
-
Install Storyblok CLI Run
npm i -g storyblok
to install the CLI. -
Login to Storyblok In your terminal, use the command
storyblok login
to log in. -
Save the component schema In your project directory, save the schema of your Storyblok components to a .json file:
storyblok pull-components --space SPACE_ID
-
Install storyblok-generate-ts Install the TypeScript generator:
pnpm add -D storyblok-generate-ts
-
Add a generation script to package.json Add the following script:
"scripts": { "generate-sb-types": "storyblok-generate-ts source=./components.[SPACE_ID].json target=./component-types-sb" }
-
Generate types Run the following command to generate TypeScript types for Storyblok components:
pnpm generate-sb-types
-
Use the generated types Import the generated types in your components, for example:
import type { PageStoryblok } from '../component-types-sb'
Don't forget to rerun pull-components
and generate-sb-types
whenever you update your Storyblok schema.
For more details, refer to the documentation of the Storyblok CLI and storyblok-generate-ts.
Start the development server at http://localhost:3000:
pnpm dev
Build the application for production:
pnpm build
Preview the production build locally:
pnpm preview
For more information on deployment, check out the Nuxt deployment documentation.
Special thanks to VictorFlow for the beautiful design that formed the basis of the project.
This open-source project is available under the MIT License.