Welcome to the Full-Stack Vue Development with Nhost series! In this comprehensive tutorial series, you’ll build a complete Vue application with Nhost that demonstrates authentication, database operations, and file management.

​
About This Tutorial Series

This tutorial series is divided into 5 parts, each focusing on a specific aspect of building modern web applications with Nhost and Vue. By the end of the series, you’ll have built a fully functional application featuring:
  • User Authentication - Complete sign up, sign in, and email verification flow
  • Todo Management - Users can create, update, delete, and mark todos as complete
  • File Uploads - Users can upload and manage files with proper permissions
  • Protected Routes - Secure areas that only authenticated users can access
This is Part 1 in the Full-Stack Vue Development with Nhost series. This part sets up the foundation by creating your Nhost project and understanding the series structure.

​
Full-Stack Vue Development with Nhost

1. Create Project

Current - Set up your Nhost project

2. Protected Routes

Route protection basics

3. User Authentication

Complete auth flow

4. GraphQL Operations

CRUD operations with GraphQL

5. File Uploads

File upload and management

​
What You’ll Learn

Throughout this series, you’ll master:
  • Setting up and configuring Nhost projects
  • Implementing secure authentication flows
  • Building protected routes with Vue Router
  • Performing GraphQL queries and mutations
  • Managing file uploads and storage
  • Configuring database permissions and security
  • Building responsive Vue interfaces

​
Prerequisites

  • Node.js 20+ installed on your machine
  • Basic knowledge of Vue and JavaScript
  • Understanding of modern web development concepts
Creating an Nhost project is the first step to building your application with Nhost. Let’s get started by setting up your backend infrastructure.

​
Step-by-Step Guide

1

​
Sign Up or Log in

If you don’t have an Nhost account, sign up at Nhost. If you already have an account, log in.sign up/sign in
2

​
Create a New Project

Click on the “Create Project” button on your dashboard or follow the onboarding prompts if you’re a new user.2
3

​
Take note of your project subdomain and region

Take note of your project subdomain and region. You will need this information to connect your application to the Nhost backend in upcoming tutorials.3

​
What’s Next?

With your Nhost project created, you now have access to: In the next tutorial, you’ll start building your Vue application and learn how to protect routes based on user authentication status.
Keep your project subdomain and region handy - you’ll need them throughout the series to connect your Vue application to the Nhost backend.