Nuxtstop

For all things nuxt.js

Laravel VueJS Ecommerce Project

#laravel #php #vue #nuxt
Laravel VueJS Ecommerce Project
20 2

In this article, we will share you a ecommerce project which is build on Laravel & Vue.js(Nuxt.js)

In this project I have used Laravel as a REST API service and the frontend of the ecommerce website is build with Nuxt.js along with the admin-panel
Here I have tried to maintain some best best practices on both Laravel & Vue.js world. I hope this project will be helpful for all of you guys.

Getting Started

First, clone the repository:

git clone https://github.com/MdMostaFizurRahaman/ecommerce.git
Enter fullscreen mode Exit fullscreen mode

There are two part of this application.

Backend

Install all the dependencies using composer

composer install
Enter fullscreen mode Exit fullscreen mode

Copy the .env.example file and rename it to .env

cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Generate a new application key

php artisan key:generate
Enter fullscreen mode Exit fullscreen mode

Generate jwt secret key

php artisan jwt:secret
Enter fullscreen mode Exit fullscreen mode

Update the database configuration from your .env file

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ecommerce
DB_USERNAME=root
DB_PASSWORD=
Enter fullscreen mode Exit fullscreen mode

Run the database migrations & seed with some initial data (Set the database connection in .env before migrating)

php artisan migrate --seed
Enter fullscreen mode Exit fullscreen mode

Start the development Server with this command

php artisan serve
Enter fullscreen mode Exit fullscreen mode

Your api is now hosted at http://localhost:8000

For broadcasting realtime notification you need to add broadcasting configuration on your .envfile

BROADCAST_DRIVER=pusher

PUSHER_APP_ID="YOUR_APP_ID"
PUSHER_APP_KEY="YOUR_APP_KEY"
PUSHER_APP_SECRET="YOUR_APP_SECRET"
PUSHER_APP_CLUSTER="YOUR_APP_CLUSTER"
Enter fullscreen mode Exit fullscreen mode

For queuing notifications you have to change the following on your .env file:

QUEUE_CONNECTION=database
Enter fullscreen mode Exit fullscreen mode

Now, listen for queues by running this command

php artisan queue:work
Enter fullscreen mode Exit fullscreen mode

Moving orders to delivery table, you should run this command:

php artisan move:delivered
Enter fullscreen mode Exit fullscreen mode

This command will run automatically every day at 12:00 AM (for this server corn set up is required)

To create a super-admin user, you can run the following command:

php artisan generate:super-admin
Enter fullscreen mode Exit fullscreen mode
API Docs
  • Admin:

https://documenter.getpostman.com/view/9967497/UVBzm94s

  • Customer:

https://documenter.getpostman.com/view/9967497/UVBzm94u

  • Public:

https://documenter.getpostman.com/view/9967497/UVBzm94v

Frontend

For the frontend, cd into the frontend directory and run the following command.

npm install
Enter fullscreen mode Exit fullscreen mode

Then copy the .env.example file and rename it to .env file.

cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Update the .env file with your credentials.

APP_NAME=Ecommerce
API_URL=http://localhost:8000/api/
API_BASE_URL=http://localhost:8000
WEBSOCKET_KEY="YOUR_PUSHER_KEY"
Enter fullscreen mode Exit fullscreen mode

Now, you can run the frontend application with the following command.

npm run dev
Enter fullscreen mode Exit fullscreen mode

or

npm run start
Enter fullscreen mode Exit fullscreen mode

Now your frontend application will be running on http://localhost:3000/

Add comment