Skip to content

Latest commit

 

History

History
194 lines (115 loc) · 3.83 KB

README.md

File metadata and controls

194 lines (115 loc) · 3.83 KB

Build Faster, Design Better with QuasarUI Components and Templates.

Try QuasarUI now

Build Faster, Design Better with QuasarUI Components and Templates.

QuasarUI is a collection of templates and over 480 beautifully crafted UI components built with Qusar, aimed at making your development process easier and faster.

Nuxt 3 Ecommerece Starter Guide ( Youtube Video )

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.

Highly Recommended

Clone this 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

Environment Variable Setup

Copy the variables from .env.example file and create new file called .env. Look at the Youtube Video to learn how you can setup.

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

Self documentation:

Install Latest Nuxt Project:

npx nuxi@latest init <project-name>

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'
         }
})

Run the 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
export default defineNuxtConfig({
   modules: [
       '@vueuse/nuxt',
   ],
})

Look at the VueUse Module to learn how you can setup on your own.

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