repository·main·Indexed 20 days ago
https://github.com/nuxt-ui-templates/saasA production-ready Nuxt SaaS template powered by Nuxt UI. It provides a complete foundation for launching SaaS products, featuring pre-built landing pages, pricing, documentation, and a blog. The template integrates Nuxt Content for structured data management, includes full-text search, native dark mode, and auto-generated sidebar navigation.
The Nuxt SaaS Template is a ready-to-use foundation for building responsive SaaS applications using Nuxt UI. It provides pre-built, customizable pages including:
The template leverages several core technologies to provide a high-quality developer and user experience:
To prevent long code snippets from cluttering a page, wrap them in a :::code-collapse container. This creates an expandable/collapsible section for the code block.
:::code-collapse
```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";:::
Use pipes | and hyphens - to define rows and columns for comparing data or listing properties.
| Prop | Default | Type |
| ------- | --------- | -------- |
| `name` | | `string` |Links are created by wrapping link text in brackets followed by the URL in parentheses: [text](url).
[Nuxt UI](https://ui.nuxt.com).[Installation](/getting-started/installation).[Nuxt UI](https://ui.nuxt.com/getting-started/installation)
[Installation](/getting-started/installation)To draw attention to specific lines, add curly braces {} containing the line range after the filename/language specification.
Example: ```ts [nuxt.config.ts]{4-5} highlights lines 4 and 5.
export default defineAppConfig({
ui: {
icons: {
copy: 'i-lucide-copy',
copyCheck: 'i-lucide-copy-check'
}
}
})The template supports a custom ::picture-and-text component within Markdown files to create alternating layouts of text and images.
#image block within ::picture-and-text tags. The image will appear on one side and the text on the other.--- and reverse: true inside the component tags.Images within this component use a specific #image identifier followed by standard Markdown image syntax. You can apply classes like {.rounded-lg} and specify height and width attributes directly in the Markdown image tag.
::picture-and-text
### Section Title
Text content goes here...
#image
{.rounded-lg height="400" width="400"}
::
::picture-and-text
---
reverse: true
---
### Reversed Section Title
Text content goes here...
#image
{.rounded-lg height="400" width="400"}
::To prepare your application for deployment, build the production assets and use the preview command to verify the build locally.
pnpm build
pnpm previewUse Markdown headers to structure documentation. Titles (#) introduce main sections, while subtitles (###) divide sections further.
Note: Each title and subtitle automatically creates an anchor and appears in the table of contents.
## Titles
### SubtitlesThe Embed feature allows you to include various HTML elements, such as videos and iframes, directly into your documentation. This is useful for adding interactive or multimedia content.
To ensure embedded elements like iframes take up the full width of their container, you can use the following class configuration in your content block:
class: "[&>div]:*:w-full"
---
class: "[&>div]:*:w-full"
---
:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"}After scaffolding your project, navigate to the project directory and install the necessary dependencies using pnpm.
pnpm install