laravel-vue-example: A PHP repository from hasanuzzamanbe

This is a Laravel and Vue example project

N.B: Click the right setup instruction that you need and follow all the commands.

Setup instructions:

Setup and use this existing repository:

Clone or download this git repository.

Run on command:

Install composer run $ composer install
Create .env $ cp .env.example .env
Generate Key $ php artisan key:generate
Install node $ npm i

Run server:

Run node server $ npm run watch
Run PHP server $ php artisan serve

Or Create a new Laravel + Vue fresh Project:

install laravel globaly:

composer global require laravel/installer
create project

composer create-project --prefer-dist laravel/laravel my-project
after create run server

php artisan serve
Db setup to .env file

set Db name, user, pass, change app name
Make a model to create DB table (will be in database/migrations)

php artisan make:model my-table-name -m

Write you DB up query on (database/migrations/*my-table-name) Example bellow:

 Schema::create('items', function (Blueprint $table) {
     $table->id();
     $table->string('name');
     $table->boolean('completed')->default(false);
     $table->timestamp('completed_at')->nullable();
     $table->timestamps();
 });

Create table from models

php artisan migrate
Make Controller (will be in app/Http/Controllers)

php artisan make:controller ItemController --resource
Setup a route (on Routes/)

Example: // import first then write the route use App\Http\Controllers\ItemController; Route::get('/items', [ItemController::class, 'index']);

Route::prefix('item')->group(function () { Route::post('/store', [ItemController::class, 'store']); Route::put('/{id}', [ItemController::class, 'update']); Route::delete('/{id}', [ItemController::class, 'destroy']); });
Write query to the itemcontroller in Controller

Example: public function store(Request $request) { $newItem = new Item(); $newItem->name = $request->item['name']; $newItem->save(); return $newItem; }

setup Vue

     $ npm i
     $ npm i vue

Create a vue app on (resource/vue/app.vue) And setup on app.js like this Example:

require('./bootstrap');

import vue from 'vue';

import App from '../vue/app.vue';

const app = new vue({
    el: '#app',
    components: { App }
})

open welcome.blade.php file and setup like this

<body class="antialiased">
    <div id="app">
        <app></app>
    </div>
</body>"

<script src="{{ mix('js/app.js') }}"></script>

use webpack.mix using vue Example:

	mix.js('resources/js/app.js', 'public/js').vue()
    		.postCss('resources/css/app.css', 'public/css', [
        			//
    		]);

All done :)

Setup your Vue files on resource directory like this example project.

visit laravel official documentation for details.

Some suggestions for beginner's:

Write Vue file's on resource directory.
Check package.json file to see installed packages

Installed packages (npm):

element-ui
vue-router

hasanuzzamanbe/laravel-vue-example

This is a Laravel and Vue example project

Setup instructions:

Run server:

setup Vue

Some suggestions for beginner's:

Help and support: