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 NexusPothos GraphQL - GraphQL Code Generator
- @urql/vue
-
Nexus ShieldGraphQL 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!
Top comments (0)