URL Shortener ب Laravel 9 Darija & Vuejs 3 Darija الجزء الثاني
فهاد الجزء الثاني من URL Shortener ب Laravel 9 Darija & Vuejs 3 Darija غادي نزيدوا Vuejs 3 ل projet ديالنا ومن بعد غادي نزيدوا les components ديالنا.
نظرة سريعة بالفيديو
1- إضافة Vuejs 3 ل Laravel 9
باش نزيدو Vuejs 3 ل Laravel 9 و les packages لي غادي نحتاجوا غادي ت exécuter هاد les commandes :
//
npm install vue@next vue-loader@next
npm i @vitejs/plugin-vue
npm install pinia
npm install sweetalert2
2- تعديل الملف vite.config.js
منبعد غادي نديرو تعديل على الملف vite.config.js الكود بعد التعديل هو :
//
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
3- تعديل الملف app.js
منبعد غادي نديرو تعديل على الملف app.js الكود بعد التعديل هو :
//
import './bootstrap';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import { createPinia } from 'pinia';
import Home from '@/components/Home.vue';
const app = createApp({});
const pinia = createPinia();
app.component('home-component', Home);
app.use(pinia);
app.mount('#app');
4- إضافة ل UserController
قبل ما نزيدو ل components ديالنا نزيدو ل UserController لي غادي يكونوا فيه les fonctions ديال register, login & logout.
الكود ديال الملف هو :
//
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
class UserController extends Controller
{
//
public function registerForm(){
if(auth()->check()){
return redirect('/');
}
return view('auth.register');
}
public function store(Request $request){
$this->validate($request,[
'name' => 'required|max:100',
'email' => 'required',
'password' => 'required|min:6'
]);
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);
auth()->login($user);
return redirect('/');
}
public function loginForm(){
if(auth()->check()){
return redirect('/');
}
return view('auth.login');
}
public function auth(Request $request){
$this->validate($request,[
'email' => 'required',
'password' => 'required|min:6'
]);
if(auth()->attempt([
'email' => $request->email,
'password' => $request->password,
])){
return redirect('/');
}else{
return redirect()->route('login')->with([
'error' => 'These credentials do not match any of our records!'
]);
}
}
public function logout(){
auth()->logout();
return redirect()->route('login');
}
}