Untitled
unknown
javascript
a year ago
2.3 kB
3
Indexable
Never
// app.js require('./bootstrap'); import Vue from 'vue/dist/vue'; window.Vue = require('vue'); import App from './App.vue'; import VueRouter from 'vue-router'; import VueAxios from 'vue-axios'; import axios from 'axios'; import {routes} from './routes'; Vue.use(VueRouter); Vue.use(VueAxios, axios); const router = new VueRouter({ mode: 'history', routes: routes }); const app = new Vue({ el: '#app', router: router, render: h => h(App), }); // app.vue <template> <div class="container"> <div class="text-center" style="margin: 20px 0px 20px 0px;"> <span class="text-secondary">Laravel Vue CRUD Example</span> </div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse"> <div class="navbar-nav"> <router-link to="/" class="nav-item nav-link">Home</router-link> <router-link to="/add" class="nav-item nav-link">Add Post</router-link> </div> </div> </nav> <br/> <router-view></router-view> </div> </template> <script> export default {} </script> //web.php Route::get('posts', 'PostController@index'); Route::group(['prefix' => 'post'], function () { Route::post('add', 'PostController@add'); Route::get('edit/{id}', 'PostController@edit'); Route::post('update/{id}', 'PostController@update'); Route::delete('delete/{id}', 'PostController@delete'); }); //api.php Route::get('{any}', function () { return view('layouts.app'); })->where('any', '.*'); // app.blade.php <!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" value="{{ csrf_token() }}"/> <title>Laravel 10 Vue JS CRUD TEST</title> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css"> <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/> <style> .bg-light { background-color: #eae9e9 !important; } </style> </head> <body> <div id="app"> </div> <script src="{{ mix('js/app.js') }}" type="text/javascript"></script> </body> </html>