Vue Templates Logo Vue Templates
Sanity Nuxt 3 Starter screenshot

Sanity Nuxt 3 Starter

Author Avatar Theme by Jjjuulliiaann
Updated: 9 May 2023
60 Stars

Opinionated monorepo starter based on Nuxt 3 and Sanity.

Github Live Preview

Categories

Nuxt Sanity

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.