sidebase

The productive way to build fullstack Nuxt 3 applications.

sidebase is a web app development kit to build production ready fullstack apps quickly.

npm create sidebase@latest

          __  _
      .-.'  `; `-._  __  _
     (_,         .-:'  `; `-._
   ,'o"(        (_,           )
  (__,-'      ,'o"(            )>
     (       (__,-'            )
      `-'._.--._(             )
         |||  |||`-'._.--._.-'
                    |||  |||

🐑 Diamond: Welcome to sidebase v0.6.1!
🐑 Diamond: sidebase helps you to create fully typesafe Nuxt 3 app in seconds!
What will your project be called? my-first-sidebase-project

? What stack would you like to use for your new project? More information: https://sidebase.io/sidebase/welcome/stacks › - Use arrow-keys. Return to submit. ❯Merino- A modular stack that let's you choose configuration and modulesCheviot

Which modules would you like to use? Instructions: ↑/↓: Highlight option←/→/[space]: Toggle selectiona: Toggle allenter/return: Complete answer

◯Prisma ORM- Next-generation Node.js and TypeScript ORM. See more: https://www.prisma.io/ ◯nuxt-auth ◯tRPC 10 ◯Tailwind CSS ◯Naive UI

? Initialize a default CI pipeline? › - Use arrow-keys. Return to submit. ❯No CI- Scaffold a project without any CI pipelineGitHub Actions

? Would you like to run `npm install` after finishing up? › (Y/n)

🐑 Diamond: Now setting up my-first-sidebase-project: ✔ Adding Nuxt 3 merino-template✔ Adding Nuxt modules✔ Adding README
🐑 Diamond: ✨ Project setup finished. Next steps are: > cd my-first-sidebase-project> npm install> npx prisma db push> npx prisma generate> npm run dev
Stuck? Join us at https://discord.gg/auc8eCeGzx
🐑 So Long, and Thanks for ... using sidebase to setup your application

Get started in one line!

Use our sidebase CLI to boostrap your project in minutes!

Nuxt

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).

Typescript

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.

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.

Prisma

Prisma is an ORM for your database. ORM stands for "object relational mapping" and that's also what a classical ORM does: It maps tables from the database onto JS / TS-objects in your code!

TailwindCSS

Tailwind is a CSS framework: It allows you to style your components using CSS. However, there is a twist with tailwind: It is utility first.

NaiveUI

Naive UI is a Vue 3 component library. There are more than 90 treeshakable components, that can all be customized to match your brand identity.

NuxtAuth

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.

NuxtI18n

NuxtI18n is the internationalization module for Nuxt. It easily integrates some localization features to your Nuxt Application and allows you to offer your project in multiple languages.

ESLint

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

What do others think of sidebase?

Have a look at what other developers have said about sidebase.

"Beautiful work on sidebase!"

Atinux

CEO of NuxtLabs

"Really nice progress on @sidebase_io. Great job everyone 🙌"

Daniel Roe

Nuxt Framework Lead

"@sidebase_io looks like a pretty slick starter template for working with @nuxt_js 3"

Vue School

Vue Learning platform

"Been following this issue/project for a few weeks now - this is fantastic, and also a project extremely close to my interest!"

ineshbose

"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"