Overview:

The Sanity Nuxt 3 Starter is a monorepo starter based on Nuxt 3 and Sanity v3. It provides a streamlined setup for developing web projects with a Sanity-powered backend. The starter includes features such as monorepo using PNPM Workspaces, Sanity Studio v3 React Backend, Nuxt 3 Frontend, live previews, progressive image loading, linting with ESLint, code formatting with Prettier, and configuration for Netlify Hosting.

Features:

• Monorepo using PNPM Workspaces: The starter uses PNPM Workspaces to manage dependencies and provide a monorepo structure for the project.
• Sanity Studio v3 React Backend: The starter includes a ready-to-use Sanity Studio backend built with React and version 3 of Sanity.
• Nuxt 3 Frontend: The starter provides a Nuxt 3 frontend for developing and displaying the web content.
• Live Previews: The starter supports live previews for documents defined in the configuration files. This allows developers to see real-time updates in the Studio preview pane.
• Progressive image loading with Unlazy using BlurHashes: The starter incorporates the Unlazy library to enable progressive image loading and uses BlurHashes for placeholder images.
• Studio using Mux for videos: The starter integrates with the Mux video platform to enable video handling and playback in the Sanity Studio.
• Vite Module Bundler: The starter utilizes the Vite module bundler for faster development and optimized build performance.
• Pinia Store: The starter includes the Pinia store, a state management solution for Vue.js, to manage application state.
• Linting with ESLint: ESLint is integrated into the starter to ensure code quality and follow best practices.
• Code Formatting with Prettier: Prettier is preconfigured in the starter to format code automatically and maintain consistent code styling.
• Configured for Netlify Hosting: The starter is set up and ready to be deployed on Netlify hosting, with the necessary configurations for seamless deployment.

Installation:

To quickly get started with the Sanity Nuxt 3 Starter, follow these steps:

1. Install the project as a Nuxt template:

   npx degit sanity-io/sanity-nuxt-3-starter my-project
   

2. Install the Sanity CLI if not already installed:

   npm install -g @sanity/cli
   

3. Create a new Sanity project and dataset:

   cd my-project
   sanity init --template sanity/template-advanced
   

4. Skip the installation of a new studio by using the --bare flag:

   sanity install --bare
   

5. Copy the new project ID and dataset from the console.

6. Create a .env file from .env.template in both the /studio and /web directories, and fill in the project ID and dataset.

7. Rename the project in package.json and the studio in studio/sanity.config.js to customize the project name.

8. Add http://localhost:3000 to the CORS origins in the Sanity project settings to allow credentials for previews.

9. Install the dependencies from the root directory:

   pnpm install
   

10. Start development on localhost:3000 for the Nuxt frontend and localhost:3333 for the Sanity studio:

    pnpx pm2 start
    

Summary:

The Sanity Nuxt 3 Starter is a comprehensive solution for building web projects with a Sanity-powered backend. It offers a range of features including a monorepo structure, live previews, progressive image loading, linting, code formatting, and Netlify hosting configuration. With easy installation steps and a set of powerful tools, developers can quickly set up and start developing their projects with ease.