Nuxt3 Apollo Starter

Overview

The content is a product analysis of the features and installation process of a specific theme called vitesse-nuxt3. The theme includes various features such as SSR, ESR, file-based routing, components auto-importing, modules, i18n customization, and state management. It also mentions the recommended IDE and provides instructions for installation and deployment.

Features

• Nuxt 3 - Includes features such as SSR, ESR, file-based routing, components auto-importing, and modules.
• @nuxt3/apollo-module - Provides composable query, multiple Apollo clients, and support for SSR or client mode.
• @nuxt3/graphql-codegen-module - Generates types and Apollo composable query code on every build for TypeGraphQL and Apollo Server integration.
• i18n customization - Allows setting preferred language according to the browser and saving user's preferred language to a cookie.
• Use svg by file name - Enables the usage of SVG icons by file name.
• Vite - Offers instant Hot Module Replacement (HMR) for faster development experience.
• UnoCSS - An instant, on-demand atomic CSS engine for quick styling.
• Pure CSS icons - Allows the usage of icons from any icon sets in Pure CSS, powered by UnoCSS.
• VueUse - A collection of useful composition APIs for Vue.js.
• <script setup> syntax - Provides a simplified syntax for defining Vue.js components.
• State Management via Pinia - Offers state management capabilities through the Pinia library.
• APIs auto-importing - Automatically imports APIs for Composition API, VueUse, and custom composables.
• Zero-config cloud functions and deploy - Offers out-of-the-box functionality for cloud functions and deployment.
• TypeScript support - Includes TypeScript support for enhanced development experience.

Develop

1. Clone the repository to your local machine.
2. If preferred, disable Vetur in your VS Code extension.
3. Run the website locally using the command npm run dev.
4. Access the website at http://localhost:3000.
5. Access the GraphQL Playground at http://localhost:3000/api/playground.

Deploy (Normal server)

1. Set up the URL environment variable, if you want to use the GraphQL server in server/api/graphql.
2. Set up the URL environment when building.
3. Example of adding in package.json:

   "build": "nuxt build",
   "start": "nuxt start"
   

4. Deploy the server using the appropriate method.

Deploy (Serverless/AWS Lambda mode)

1. Set up the CDN configuration.
2. Set the cdnURL in nuxt.config.ts.
3. Set up the URL environment variable, if you want to use the GraphQL server in server/api/graphql.
4. Set up the URL environment when building.
5. Example of adding in package.json:

   "build:lambda": "nuxt build nuxt.config.ts -c lambda",
   "lambda:deploy": "npm run build:lambda && nuxt deploy",
   "lambda:cleanup": "nuxt cleanup"
   

6. Upload the static files.
7. Upload .output/server/public/* to the CDN.
8. Configure a custom domain, if required, in serverless.yml.
9. Deploy and visit the specified domain.

Summary

The product analysis introduces the vitesse-nuxt3 theme and highlights its key features, including support for Nuxt 3, Apollo Server integration, i18n customization, SVG icon usage, Vite and UnoCSS integration, VueUse composition APIs, and more. The analysis also provides a guide for installing the theme, including steps for local development and deployment.