Starter Template for FullStack Ecommerece Website with Nuxt 3

10 Novermber 2024

nuxtyoutube

Nuxt 3 Ecommerece Starter Guide

If you want to follow on your own ( want to install latest depencies ), please follow the self documentation section.

I'm creating this setup repository on 28/10/2024. I'll keep updating this, if I see any changes in the process.

Clone Nuxt3-Starter-Template repository and do the following steps

Setup

Make sure to install the dependencies:

# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install

Self documentation:

  1. Install Latest Nuxt Project:
npx nuxi@latest init <project-name>
  1. Shadcn Setup:

Look at the Shadcn-Vue Documentation to learn how you can setup on your own.

OR follow following steps:

 npm install -D typescript

 npx nuxi@latest module add @nuxtjs/tailwindcss

 npx nuxi@latest module add shadcn-nuxt

Update the nuxt.config.ts as following:

 export default defineNuxtConfig({
        compatibilityDate: '2024-04-03',
        devtools: { enabled: true },
        modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
          shadcn: {
            prefix: '',
            componentDir: './components/ui'
          }
 })

Shadcn CLI:

npx shadcn-vue@latest init

On running the above command, you have to choose different settings, I'll recommend to choose defaults one

We are done with shadcn setup, now we can install the components, according to our usage, as I know which components we will be using in our project.

Let's run the following command to install components

npx shadcn-vue@latest add button alert avatar badge card carousel checkbox command dialog dropdown-menu form input label popover select separator sheet table toast tooltip

So far we are done with nuxt project, and shadcn setup. Now let's install the other nuxt modules and other packages we will be using in our project

VueUse:

npm i @vueuse/nuxt @vueuse/core

nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@vueuse/nuxt',
    ],
})

Nuxt Icon:

npx nuxi module add icon

Look at the Nuxt Icon to learn how you can setup on your own.

Nuxt Cloudinary for image upload and optimization:

npm install @nuxtjs/cloudinary

nuxt.config

export default defineNuxtConfig({
    modules: [
    "@nuxtjs/cloudinary"
    ],
})

Look at the Nuxt Cloudinary to learn how you can setup on your own.

Nuxt Auth Utils for auth and session management:

npx nuxi@latest module add auth-utils

Look at the Nuxt Auth Utils to learn how you can setup on your own.

Stripe: For payment

 npm install stripe

Prisma

npm install -D prisma @prisma/client