V3 Stack screenshot

V3 Stack

Author Avatar Theme by Nconnector
Updated: 12 Apr 2023
8 Stars

T3 stack for Vue/Nuxt, without Tailwind

Categories

Overview:

The Nuxt3 + tRPC Fullstack Scaffolding is a project that enables users to kick off their end-to-end typesafe project with TRPC and Nuxt. It provides a range of features including fast HMR (Hot Module Replacement), typesafe API using TypeScript and tRPC, Vue3 and Nuxt3 support, eslint integration, Prisma ORM integration, Pinia state management, Nuxt Auth with GitHub and Auth0 authentication, and Vite setup. The project offers an easy and efficient way to set up a fullstack application using Nuxt and tRPC.

Features:

  • Vue3 / Nuxt 3: Supports the latest version of Vue and Nuxt, providing access to the latest features and improvements.
  • Typescript: Built using TypeScript, ensuring type safety and better code maintainability.
  • eslint: Integration with eslint, a popular linting tool that helps maintain a consistent code style and improve code quality.
  • Prisma ORM: Integration with Prisma ORM, a powerful database toolkit that simplifies database operations and offers efficient data modeling capabilities.
  • Pinia state management: Uses Pinia state management, a modern and elegant state management system for Vue.js.
  • tRPC API: Utilizes tRPC, a framework-agnostic TypeScript-first API toolkit for building scalable and maintainable APIs.
  • Nuxt Auth: Integration with Nuxt Auth, a flexible authentication system for Nuxt.js, supporting various authentication providers such as GitHub and Auth0.
  • Vite: Includes Vite setup, a build tool that offers fast and efficient development experience with instant hot module replacement.

Installation:

To install the Nuxt3 + tRPC Fullstack Scaffolding project, you can follow these steps:

  1. If starting from this template, execute the following commands:
    npm i
    populate .env
    prisma setup
    eslint --init
    
  2. If starting from scratch, execute the following commands:
    npx nuxi init v3-project-name
    npm i
    npm i @trpc/server @trpc/client trpc-nuxt zod @next-auth/prisma-adapter @pinia/nuxt
    npm i -D pinia --legacy-peer-deps
    npm i -D @sidebase/nuxt-auth @types/node prisma eslint @nuxtjs/eslint-config-typescript
    
  3. Continue the setup using the “from this template” section or refer to the project’s documentation for further instructions.

Summary:

The Nuxt3 + tRPC Fullstack Scaffolding project provides a robust and feature-rich starting point for building end-to-end typesafe applications with Nuxt and tRPC. With its support for the latest versions of Nuxt and Vue, integration with essential tools like eslint and Prisma ORM, and features such as Pinia state management and Nuxt Auth for authentication, the project offers a comprehensive solution for developers looking to quickly and efficiently set up a fullstack application. The easy installation process and clear documentation make it accessible for developers of all skill levels.