Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { headConfig, sitemapConfig } from './head'
export default defineConfig({
title: 'sidebase',
titleTemplate: ':title - by SIDESTREAM',
description: 'The productive way to build fullstack Nuxt 3 applications.',
description: 'The productive way to build fullstack Nuxt 3+ applications.',
srcDir: 'src',
base: '/',
cleanUrls: true,
Expand Down
2 changes: 1 addition & 1 deletion .vitepress/head.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const headConfig: HeadConfig[] = [
['link', { rel: 'icon', href: '/favicon.ico' }],
['meta', { name: 'theme-color', content: '#30A36C' }],
['meta', { property: 'og:title', content: 'sidebase - by SIDESTREAM' }],
['meta', { property: 'og:description', content: 'The web app development kit to build production fullstack Nuxt 3 apps quickly.' }],
['meta', { property: 'og:description', content: 'The web app development kit to build production fullstack Nuxt 3+ apps quickly.' }],
['meta', { property: 'og:site_name', content: 'sidebase' }],
['meta', { property: 'og:type', content: 'website' }],
['meta', { property: 'og:locale', content: 'en' }],
Expand Down
2 changes: 1 addition & 1 deletion .vitepress/routes/sidebar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const routes: DefaultTheme.Config['sidebar'] = {
link: '/',
},
{
text: 'Nuxt 3',
text: 'Nuxt 3+',
link: '/nuxt-3',
},
{
Expand Down
4 changes: 2 additions & 2 deletions .vitepress/theme/components/Landing/Stack/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export interface StackItem {
export const stackItems: StackItem[] = [
{
name: 'Nuxt',
description: 'Nuxt 3 wraps Vue 3 to help us productive Vue 3 quicker than ever before: Fullstack web Apps, Static Websites, PWAs and more are all possible with Nuxt 3. Nuxt also optimizes all of these modes heavily to provide the best user-experience (UX) and developer-experience (DX).',
description: 'Nuxt wraps Vue 3 to help us productive Vue 3 quicker than ever before: Fullstack web Apps, Static Websites, PWAs and more are all possible with Nuxt. Nuxt also optimizes all of these modes heavily to provide the best user-experience (UX) and developer-experience (DX).',
link: '/sidebase/components/nuxt-3',
logoPath: '/brands/nuxt.svg',
},
Expand Down Expand Up @@ -42,7 +42,7 @@ export const stackItems: StackItem[] = [
},
{
name: 'NuxtAuth',
description: 'NuxtAuth wraps the very popular Auth.js library and brings its 23k github star power to the Nuxt 3 ecosystem. With nuxt-auth you can implement authentication via most possible OAuth providers in a few seconds.',
description: 'NuxtAuth wraps the very popular Auth.js library and brings its 23k github star power to the Nuxt 3+ ecosystem. With nuxt-auth you can implement authentication via most possible OAuth providers in a few seconds.',
logoPath: '/brands/nuxt-auth.png',
},
{
Expand Down
4 changes: 2 additions & 2 deletions .vitepress/theme/components/Landing/Terminal/Terminal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default defineComponent({
<DiamondSeperator />
</VtText>
<VtText :line-delay="0">
sidebase helps you to create fully typesafe Nuxt 3 app in seconds!
sidebase helps you to create fully typesafe Nuxt 3+ app in seconds!
</VtText>
<br>
<VtText :line-delay="1000">
Expand All @@ -103,7 +103,7 @@ export default defineComponent({
<VtText :line-delay="0">
Now setting up <span class="text-green-500">my-first-sidebase-project</span>:
</VtText>
<VtText>✔ Adding Nuxt 3 merino-template</VtText>
<VtText>✔ Adding Nuxt 3+ merino-template</VtText>
<VtText>✔ Adding Nuxt modules</VtText>
<VtText>✔ Adding README</VtText>
<br>
Expand Down
2 changes: 1 addition & 1 deletion .vitepress/theme/components/Landing/Testimonials/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const testimonials: Testimonial[] = [
{
name: 'Fabian',
avatar: 'https://avatars.githubusercontent.com/madebyfabian',
text: 'Thank you so much for sharing! Trying to use nuxt 3 on a larger project currently, and struggling a lot in terms of project structure, best practices, which ecosystems & libs to use',
text: 'Thank you so much for sharing! Trying to use Nuxt 3+ on a larger project currently, and struggling a lot in terms of project structure, best practices, which ecosystems & libs to use',
githubLink: 'https://github.com/madebyfabian',
twitterLink: 'https://twitter.com/madebyfabian/status/1566393943578787840',
},
Expand Down
2 changes: 1 addition & 1 deletion src/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ layout: home

hero:
name: "sidebase"
text: "The productive way to build fullstack Nuxt 3 applications."
text: "The productive way to build fullstack Nuxt applications."
tagline: "sidebase is a web app development kit to build production ready fullstack apps quickly."
actions:
- theme: brand
Expand Down
2 changes: 1 addition & 1 deletion src/sidebase/components/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: "sidebase is made up of components like: Nuxt 3, TypeScript, Prisma ORM and more. This section explains how to use these different components in your sidebase Nuxt 3 app."
description: "sidebase is made up of components like: Nuxt 3+, TypeScript, Prisma ORM and more. This section explains how to use these different components in your sidebase Nuxt 3+ app."
---
# Overview

Expand Down
12 changes: 6 additions & 6 deletions src/sidebase/components/nuxt-3.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
description: "Nuxt 3 is a core-component of sidebase: It's always there and ensures that production-ready fullstack Vue 3 apps can be developed smoothly. Learn how to use Nuxt 3 with sidebase here."
description: "Nuxt 3+ is a core-component of sidebase: It's always there and ensures that production-ready fullstack Vue 3 apps can be developed smoothly. Learn how to use Nuxt 3+ with sidebase here."
---
# Nuxt 3
# Nuxt 3+

[Vue 3](https://vuejs.org/) is great - it has kept its promise of progressiveness and simplicity for web app development. It also has a rich ecosystem of libraries, modules and a sprawling developer community. [Nuxt 3](https://nuxt.com/) wraps Vue 3 to help us productive Vue 3 quicker than ever before: Fullstack web Apps, Static Websites, PWAs and more are all possible with Nuxt 3. Nuxt also optimizes all of these modes heavily to provide the best user-experience (UX) and developer-experience (DX). Nuxt 3 prides itself with being "The Intuitive Web Framework" - and we agree!
[Vue 3](https://vuejs.org/) is great - it has kept its promise of progressiveness and simplicity for web app development. It also has a rich ecosystem of libraries, modules and a sprawling developer community. [Nuxt 3+](https://nuxt.com/) wraps Vue 3 to help us productive Vue 3 quicker than ever before: Fullstack web Apps, Static Websites, PWAs and more are all possible with Nuxt 3+. Nuxt also optimizes all of these modes heavily to provide the best user-experience (UX) and developer-experience (DX). Nuxt 3+ prides itself with being "The Intuitive Web Framework" - and we agree!

Nuxt 3 is what "launches" your app. So you are already using it after running:
Nuxt 3+ is what "launches" your app. So you are already using it after running:
::: code-group
```bash [npm]
npm run dev
Expand All @@ -21,11 +21,11 @@ yarn run dev
You will see an output like this (if everything went well):
```bash
Nuxi 3.0.0
Nuxt 3.0.0 with Nitro 1.0.0
Nuxt 3+.0.0 with Nitro 1.0.0

> Local: http://localhost:3000/
> Network: http://192.168.8.118:3000/
> Network: http://[fd60:aaef:97c3:d900:ce:722e:a03c:dc0]:3000/
```

When you open `localhost:3000` you will see the sidebase-start-screen. It is very minimal - don't let that shock you. It is meant to be removed as one of your first actions and be replaced with your own beautiful idea. Checkout the [official nuxt-docs here](https://nuxt.com) for further reading and a deep-dive into Nuxt 3.
When you open `localhost:3000` you will see the sidebase-start-screen. It is very minimal - don't let that shock you. It is meant to be removed as one of your first actions and be replaced with your own beautiful idea. Checkout the [official nuxt-docs here](https://nuxt.com) for further reading and a deep-dive into Nuxt 3+.
4 changes: 2 additions & 2 deletions src/sidebase/components/nuxt-auth.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
description: "Authenticated Nuxt 3 apps are easy! Use this page to learn how to use authentication after setting it up via sidebase."
description: "Authenticated Nuxt 3+ apps are easy! Use this page to learn how to use authentication after setting it up via sidebase."
---
# Nuxt Auth

`nuxt-auth` is a module we made ourselves. It wraps the very popular NextAuth.js library and brings its 12k github star power to the Nuxt 3 ecosystem. With `nuxt-auth` you can implement authentication via most possible OAuth providers in a few seconds.
`nuxt-auth` is a module we made ourselves. It wraps the very popular NextAuth.js library and brings its 12k github star power to the Nuxt 3+ ecosystem. With `nuxt-auth` you can implement authentication via most possible OAuth providers in a few seconds.

We've written a full documentation for `nuxt-auth`, [please check it out here](https://auth.sidebase.io).
2 changes: 1 addition & 1 deletion src/sidebase/components/prisma.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: "Nuxt 3 and Prisma make a great team. It's super easy to setup Prisma ORM with Nuxt 3 by using sidebase - use this page to learn how to use Prisma after setting it up via sidebase."
description: "Nuxt 3+ and Prisma make a great team. It's super easy to setup Prisma ORM with Nuxt 3+ by using sidebase - use this page to learn how to use Prisma after setting it up via sidebase."
---
# Prisma ORM

Expand Down
2 changes: 1 addition & 1 deletion src/sidebase/components/tailwindcss.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: "TailwindCSS and Nuxt 3 are a match made in heaven! Use this page to learn how to use Tailwind CSS after setting it up via sidebase."
description: "TailwindCSS and Nuxt 3+ are a match made in heaven! Use this page to learn how to use Tailwind CSS after setting it up via sidebase."
---
# Tailwind CSS

Expand Down
4 changes: 2 additions & 2 deletions src/sidebase/components/trpc.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
description: "Nuxt 3 and tRPC make a great team. It's super easy to setup tRPC with Nuxt 3 by using sidebase - use this page to learn how to use tRPC after setting it up via sidebase."
description: "Nuxt 3+ and tRPC make a great team. It's super easy to setup tRPC with Nuxt 3+ by using sidebase - use this page to learn how to use tRPC after setting it up via sidebase."
---
# tRPC

tRPC rightly has the tagline "Move Fast and Break Nothing.": It allows you to define an API that is typesafe. TypeScript will start warning you on the client-side if you changed a server-side return but didn't make the necessary changes on the frontend! tRPC also adds snappy autocomplete.

In addition tRPC allows automatic de-/serialization of complex data-types (think: `Date`, `Map`, `Set`, `Array`, ...) using `superjson`. So when you send a `Date`-object from the backend to your frontend, you can use it as a `Date` in your frontend, no need to manually call `new Date(...)` and add additional verification code for proper deserialization, amazing! Adding `zod` on top can give you automatic input validation of data that comes into your endpoints (see below).

Under the hood sidebase uses the [`nuxt-trpc` module](https://trpc-nuxt.vercel.app/) to integrate tRPC. This module sets up a `tRPC` router in the Nuxt 3 backend. This router serves as the API you can then call. The "hello world" route that comes with sidebase looks as follows:
Under the hood sidebase uses the [`nuxt-trpc` module](https://trpc-nuxt.vercel.app/) to integrate tRPC. This module sets up a `tRPC` router in the Nuxt 3+ backend. This router serves as the API you can then call. The "hello world" route that comes with sidebase looks as follows:
::: code-group
```ts [server/trpc/routers/index.ts]
import { z } from 'zod'
Expand Down
2 changes: 1 addition & 1 deletion src/sidebase/resources/breakpoint-debugging.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: "Guide that describes how to perform breakpoint JS debugging of Vue 3 + Nuxt 3 + sidebase apps in VS Code."
description: "Guide that describes how to perform breakpoint JS debugging of Vue 3 + Nuxt 3+ + sidebase apps in VS Code."
---
# Breakpoint Debugging

Expand Down
4 changes: 2 additions & 2 deletions src/sidebase/resources/coding-setup.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
description: "Guide that describes how to correctly configure Node, npm and VS Code with nvm and Volar for Vue 3 and Nuxt 3."
description: "Guide that describes how to correctly configure Node, npm and VS Code with nvm and Volar for Vue 3 and Nuxt 3+."
---
# Node, npm, VS Code setup for Vue and Nuxt 3
# Node, npm, VS Code setup for Vue and Nuxt 3+

If this is the first time you run a `npm` / `node` app on your setup, this guide will help you to set both of them up for your sidebase project:

Expand Down
6 changes: 3 additions & 3 deletions src/sidebase/welcome/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ npm run dev // Start the development server, use CTRL+C to stop

If you're not familiar with the technologies that are used here, we suggest that you [get help](/sidebase/welcome/getting-help) or read through the introductions of each technology in the usage section:
- [Quick Start](/sidebase/welcome/quick-start)
- [Nuxt 3](/sidebase/components/nuxt-3)
- [Nuxt 3+](/sidebase/components/nuxt-3)
- [TypeScript](/sidebase/components/typescript)
- [Prisma ORM](/sidebase/components/prisma)
- [Tailwind CSS](/sidebase/components/tailwindcss)
Expand All @@ -49,11 +49,11 @@ This is a quite common problem and often time comes down to one of the following

The sidebase template is alive and well! It's used to setup Cheviot under the hood, so if you want to use the sidebase template, just select "Cheviot" in the first sidebase CLI step. You [can still find the sidebase source-code and template here](https://github.com/sidebase/sidebase). It is basically used unaltered for Cheviot.

## Why are TypeScript and Nuxt 3 essential?
## Why are TypeScript and Nuxt 3+ essential?

TypeScript (TS) is essential because it provides guard-rails for development: TS let's us know what we talk about in our meeting when we discuss what the `roles: Roles[]` array contains, it informs our code-editor what we might be trying to do and let's it help us (think of GitHub Co-Pilot, but less AI), it guarantees certain kinds of correctness that we could only discover as a "bug" when our application was already deployed. The numerous benefits of TS are well known, if you want to read on, how about checking out [the official Why TypeScript page](https://www.typescriptlang.org/why-create-typescript).

[Vue 3](https://vuejs.org/) is great - it has kept its promise of progressiveness and simplicity for web app development. It also has a rich ecosystem of libraries, modules and a sprawling developer community. [Nuxt 3](https://nuxt.com/) wraps Vue 3 to help us productive Vue 3 quicker than ever before: Fullstack web Apps, Statis Websites, PWAs and more are all possible with Nuxt 3. Nuxt also optimizes all of these modes heavily to provide the best user-experience (UX) and developer-experience (DX).
[Vue 3](https://vuejs.org/) is great - it has kept its promise of progressiveness and simplicity for web app development. It also has a rich ecosystem of libraries, modules and a sprawling developer community. [Nuxt 3+](https://nuxt.com/) wraps Vue 3 to help us productive Vue 3 quicker than ever before: Fullstack web Apps, Statis Websites, PWAs and more are all possible with Nuxt 3+. Nuxt also optimizes all of these modes heavily to provide the best user-experience (UX) and developer-experience (DX).

## Where can I get help?

Expand Down
2 changes: 1 addition & 1 deletion src/sidebase/welcome/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: "sidebase is a web development kit and CLI to build production read

sidebase is a web development kit to build production ready fullstack apps quickly. sidebase relies on modern, fully-typed and best-practice technology to achieve this goal. sidebase embraces the fullstack TypeScript approach to app development: Code sharing between client and server, reduced learning curve for engineers and code-reuse across apps are things we love about this approach. That said, you can also use sidebase to build client-side only apps.

The core of sidebase are [Nuxt 3](https://nuxt.com/) and [TypeScript](https://www.typescriptlang.org/). On top of that sidebase provides different stacks that come ready with common components you need for a production application, including:
The core of sidebase are [Nuxt 3+](https://nuxt.com/) and [TypeScript](https://www.typescriptlang.org/). On top of that sidebase provides different stacks that come ready with common components you need for a production application, including:
- Database
- API setup and typesafety
- CI pipelines
Expand Down
2 changes: 1 addition & 1 deletion src/sidebase/welcome/quick-start.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: "Quick-start and first-steps of using sidebase to create production-ready fullstack Vue 3 and Nuxt 3 applications."
description: "Quick-start and first-steps of using sidebase to create production-ready fullstack Vue 3 and Nuxt 3+ applications."
---
# Quick Start

Expand Down
Loading