Nuxt3 ️ GraphQL

The repository containing the example code for this series is available here.

For some time I've been trying to assemble a full stack solution based on Nuxt and GraphQL. Now that Nuxt3 RC is just around the corner has landed, I figured it would be interesting to explore its full stack capabilities with the following goals in mind:

• Declarative database modelling
• Code-first schema definition
• End to end type safety
• SSR friendly GraphQL client
• Isomorphic authentication / authorization
• Form generation and validation

Conveniently, these features correspond to the following projects:

• Prisma ORM
• GraphQL Nexus Pothos GraphQL
• GraphQL Code Generator
• @urql/vue
• Nexus Shield GraphQL AuthZ
• FormKit

This series aims to document my progress towards integrating these in a full stack application boilerplate.

Initializing the Nuxt3 project

First things first, let's create a Nuxt3 project:

npx nuxi init nuxt3-fullstack
cd nuxt3-fullstack && yarn install

Starting the development server will generate the .nuxt/tsconfig.json TypeScript configuration extended by tsconfig.json:

yarn dev

Automatic code formatting

It's also a good idea to add ESLint for automatic code formatting with the preset of your choice:

yarn add -D eslint @lewebsimple/eslint-config-vue

The ESLint configuration can be defined with the following section inside package.json :

"eslintConfig": {
  "extends": "@lewebsimple/eslint-config-vue"
}

If your IDE is configured properly, saving a source file should now reformat it automatically (this might require restarting the TypeScript language service). Otherwise, we can manually lint the project with the following script (which should be added to the corresponding section in package.json):

"lint": "eslint --fix --ignore-path .gitignore ."

Bonus: Adding Tailwind CSS

Let's add Tailwind CSS because we're really cool:

yarn add -D @nuxtjs/tailwindcss @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/typography

We need to add @nuxtjs/tailwindcss to modules in nuxt.config.ts:

import { defineNuxtConfig } from "nuxt3";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
  tailwindcss: {
    viewer: false,
  },
});

Then generate and adjust tailwind.config.js:

npx tailwindcss init

/* eslint-disable @typescript-eslint/no-var-requires */

module.exports = {
  theme: {
    extend: {
      container: {
        center: true,
        padding: "1.5rem",
      },
      typography: {
        DEFAULT: {
          css: {
            maxWidth: "none",
          },
        },
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/typography"),
  ],
};

To display a basic frontend design, we'll delete app.vue, create a default layout in layouts/default.vue:

<template>
  <div class="container py-6">
    <NuxtPage />
  </div>
</template>

... and a default front page in pages/index.vue:

<template>
  <div id="front-page" class="prose">
    <h1>Nuxt3 ❤️ GraphQL</h1>
  </div>
</template>

Wow, such a nice design!

Finishing touches

Now is also a good time to set the project name, description, version and license in package.json and to commit our changes to Git.

We can also setup release-it to manage our release process:

yarn add -D release-it

We can create new releases with the following script in package.json:

"release": "release-it"

With our Nuxt3 project properly initialized, we’re ready to start adding some features!