Nuxt3 + Apollo Starter

Preview

Netlify Vercel Server Serverless(aws lambda)

Features

• 💚 Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc.

• 🌞 @nuxt3/apollo-module - composable query, multiple apollo clients, ssr or client mode For example:

  import { useCountryQuery, usePersonQuery } from '@/generated/operations' // generated by @nuxt3/graphql-codegen-module
  
  const { result: client, loading: queryLoading } = await useCountryQuery({
    clientId: 'trevorblades',
    prefetch: false, // clientMode, need validate result in template
  })
  
  const { result: server, loading: jumpLoading, error } = await usePersonQuery({
    personInput: {
      name: 'Phil Xu',
    },
  }, {
    prefetch: true, // ssrMode, default: true
  })
  
  const { mutate: login, onDone } = useLoginMutation()
  const { $apolloHelpers } = useNuxtApp()
  onDone((res) => {
    $apolloHelpers.onLogin(res.data.login.token)
  })
  const logout = () => {
    $apolloHelpers.onLogout()
  }
  
  // use clients directly $apollo.default  $apollo.trevorblades
  // const { $apollo } = useNuxtApp()

• 💻 TypeGraphql + Apollo Server

• 💼 @nuxt3/graphql-codegen-module - generate types and apollo composable query code on every build

• 🌏 i18n customized intlify i18n - set preferred language according to browser, and save user's preferred language to cookie.

• 🧩 Use svg by file name For example:

  // svg file in @/assets/svgs/apollo.svg
  <SvgIcon name="apollo" />
  

• ⚡️ Vite - Instant HMR

• 🎨 UnoCSS - The instant on-demand atomic CSS engine.

• 😃 Use icons from any icon sets in Pure CSS, powered by UnoCSS

• 🛠 VueUse - collection of useful composition APIs

• 🔥 The <script setup> syntax

• 🍍 State Management via Pinia

• 📥 APIs auto importing - for Composition API, VueUse and custom composables.

• 🏎 Zero-config cloud functions and deploy

• 🦾 TypeScript, of course

IDE

We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).

Develop

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit newbeea/nuxt3-apollo-starter my-nuxt3-apollo-app

Dev

cd my-nuxt3-apollo-app
yarn # npm pnpm may not work properly in production mode
yarn run dev

Website: http://localhost:3000 Graphql Playground: http://localhost:3000/api/playground

Deploy

Normal server

Setup URL environment variable (if you want to use graphql server in server/api/graphql)

setup URL environment when build for example: add in package.json

"build": "cross-env URL=https://xxx.yourdomain.com nuxi build"

build

yarn run build

start

yarn run start

Serverless(aws lambda) mode

Setup cdn

set cdnURL in nuxt.config.ts

Setup URL environment variable (if you want to use graphql server in server/api/graphql)

setup URL environment when build for example: add in package.json

"build:sls": "cross-env NITRO_PRESET=lambda URL=https://xxx.yourdomain.com nuxi build"

build with lambda preset

yarn run build:sls

upload static files

upload .output/server/public/* to cdn (cdnURL)

custom domain (optional)

config customDomain in serverless.yml

custom:
  customDomain:
    http:
      domainName: xxx.yourdomain.com
      endpointType: regional
      certificateName: yourdomain.com
      createRoute53Record: true
plugins:
  - serverless-domain-manager

then

yarn run domain

deploy

yarn run deploy

then visit xxx.yourdomain.com

Inspiration

antfu/vitesse-nuxt3