Nhost Template for Nuxt

The Nhost Template for Nuxt is a boilerplate that combines a Nuxt.js frontend with Nhost's backend-as-a-service, preconfiguring GraphQL, authentication, and Tailwind CSS so a new project can start using realtime data and protected routes in minutes.

What is the Nhost Template for Nuxt?

The Nhost Template for Nuxt is a GitHub template repository created by MarcelloTheArcane. It scaffolds a Nuxt.js application with Nhost, a backend-as-a-service that provides a PostgreSQL database, a GraphQL API, file storage, and authentication. The template takes environment variables for GraphQL and auth endpoints from a .env file and outputs a runnable Nuxt app prewired to those services. It is built on Nuxt.js and uses the @nuxtjs/apollo and @nuxtjs/auth modules.

Key Features

• GraphQL support — the project includes @nuxtjs/apollo configured in plugins/apollo.js, which attaches the bearer token to WebSocket requests so GraphQL subscriptions work with authentication.
• Authentication support — @nuxtjs/auth is set up with a custom refresh scheme in plugins/refreshScheme.js to handle the JWT refresh flow Nhost uses.
• Route access control — plugins/auth.js contains logic that decides whether a user may access a page, giving developers a way to gate protected areas.
• Tailwind CSS preconfigured — the project ships with Tailwind for utility-first styling; the README explains how to remove Tailwind dependencies if you prefer another CSS tool.
• One-click project creation — GitHub's "Use this template" button creates a new repository from this one, or you can clone and reset the git remote from the terminal.
• Upstream update workflow — the setup adds a template remote, so you can fetch later changes with git fetch --all --allow-unrelated-histories.

Who is it for?

• Nuxt.js developers who want a working Nhost backend integration without spending time configuring Apollo and auth modules themselves.
• Full-stack developers who need a PostgreSQL database with a GraphQL API and built-in authentication for a new application and prefer to start from a template.
• Developers building realtime features — the Apollo configuration already supports authenticated WebSocket subscriptions, so live data and chat-like functionality can be added quickly.
• Indie hackers and small teams who want a free and open starting point for Nhost projects and like Tailwind CSS for styling.

What can you do with the Nhost Template for Nuxt?

• Spin up a new project — clone the template, edit the .env file with Nhost's GraphQL and auth URLs, then run yarn and yarn serve to start development.
• Add protected pages — use the auth configuration in plugins/auth.js to restrict page access to logged-in users.
• Set up realtime GraphQL — the configured Apollo module adds bearer tokens to WebSocket connections, so subscriptions are authenticated by default.
• Swap the styling system — remove the Tailwind dependencies and replace them with any other CSS framework or vanilla CSS.

How does the template work?

The template leverages Nuxt modules. The Apollo module points to Nhost's GraphQL endpoint from the .env URL, and the auth module's refresh scheme exchanges Nhost refresh tokens to keep the user session alive. When a user logs in, the bearer token is added to API and WebSocket requests. The included plugin files are prewritten with this integration, so the developer only supplies their Nhost project URLs.

FAQ

How do I create a project from this template?

On GitHub, click the "Use this template" button to create a new repository based on it. Alternatively, clone the repository with git clone https://github.com/MarcelloTheArcane/nhost-template -b master --single-branch <project-name>, then change the remote to your own repository URL.

What environment variables do I need to set?

The .env file must contain the GraphQL and auth URLs from your Nhost project. Point these to your Nhost backend so the Apollo and auth modules can connect to the correct endpoints.

Does the template include file storage?

Nhost provides file storage as part of its backend service, and the project is configured to connect to Nhost. The README does not show any special file-upload code, but the storage API is available on the Nhost side.

Can I use this template without Tailwind CSS?

Yes. The README states you can remove the Tailwind dependencies and add a different styling solution. The template doesn't depend on Tailwind for its core logic.

Is the template free to use?

The repository is public on GitHub and marked as a template for generating new projects. There is no license or pricing information in the README, so assume standard open-source usage unless you check the repository directly.