ESC
NuxtStarterAI logo
Menu
On this page

Get Started with Nuxt Starter AI

Hi Maker, welcome to NuxtStarter AI

Here's a simple explanation of the NuxtStarter project layout and how you can start using it.


We've made a basic and user-friendly project layout for you to start your project right away. Just follow these steps to set up your development environment.

Starting your development environment

1. To begin working on your project, you should first clone the NuxtStarter repository from GitHub, and then install the necessary dependencies.

1 2 git clone https://github.com/NuxtStarterAI/nuxt-starter-ts [YOUR_APP_NAME] 3 cd [YOUR_APP_NAME] 4 yarn install 5 git remote remove origin

Note

NPM is the suggested package manager for NuxtStarter.

2. Once you've installed the necessary dependencies, you should rename the environment variable file.

1cp .env.example .env.local

3. Retrieve your Supabase credentials and then update the NEXT_PUBLIC_SUPABASE_ANON_KEY and NEXT_PUBLIC_SUPABASE_URL in the .env.local file with your Supabase credentials.


4.🚀 Lastly, launch the development server by executing the following command:

1npm run dev

Project Structure

The NuxtStarter project structure is designed to be straightforward and user-friendly to use.

/pages → Pages (1 folder + page.tsx = 1 page)

/components → Reusable Vue components

/server/api → API routes

/libs → Helper/utility functions (e.g. Stripe&LemonSqueezy integration, auth etc.)


.env File

The .env file is where you store environment variables. You don't have to fill in every variable, only use the ones you need as you progress.

1 2 EMAIL_SERVER= 3 MAILGUN_API_KEY= 4 NEXT_PUBLIC_SUPABASE_URL= 5 NEXT_PUBLIC_SUPABASE_ANON_KEY= 6 SUPABASE_SERVICE_ROLE_KEY= 7 STRIPE_PUBLIC_KEY= 8 STRIPE_SECRET_KEY= 9 STRIPE_WEBHOOK_SECRET= 10 LEMONSQUEEZY_API_KEY= 11 LEMONSQUEEZY_STORE_ID= 12 LEMONSQUEEZY_WEBHOOK_SECRET=