{"id":435,"date":"2022-09-24T16:07:17","date_gmt":"2022-09-24T16:07:17","guid":{"rendered":"https:\/\/247blogs.com\/wp\/2022\/09\/24\/laravel-9-tutorial-create-laravel-9-vue-js-crud-single-page-application\/"},"modified":"2022-09-24T17:37:32","modified_gmt":"2022-09-24T17:37:32","slug":"laravel-9-tutorial-create-laravel-9-vue-js-crud-single-page-application","status":"publish","type":"post","link":"https:\/\/247blogs.com\/wp\/laravel-9-tutorial-create-laravel-9-vue-js-crud-single-page-application\/","title":{"rendered":"Laravel-9 Tutorial &#8211; Create Laravel 9 Vue JS CRUD Single Page Application"},"content":{"rendered":"<div id=\"\">\n<p>Throughout this Laravel Vue js CRUD example tutorial, you will see and understand how to build Create, Read, Update, and Delete API and how to consume APIs to perform CRUD operations in Laravel Vue JS application.<\/p>\n<p>In computer science, create, read, update, and delete are not just mere words. They are the foundational building block of every application for creating, reading, updating, and deleting the data.<\/p>\n<p>The terminology might be different sometimes, for instance, retrieval rather than read, modify somewhat of the update, or destroy alternately of delete.<\/p>\n<p>Nevertheless, in this laravel vue js crud tutorial, we will help you ascertain how to integrate the laravel vue js CRUD operations in a single page application with vue js components and laravel app.<\/p>\n<h2>Laravel 9 Vue JS CRUD Example<\/h2>\n<ul>\n<li>Create a Laravel Project<\/li>\n<li>Enable database connection<\/li>\n<li>Create a model and run migration<\/li>\n<li>Create and configure the controller<\/li>\n<li>Add routes<\/li>\n<li>Install Laravel Vue UI<\/li>\n<li>Install NPM dependencies<\/li>\n<li>Build Vue Js CRUD Components<\/li>\n<li>Test Laravel Vue JS CRUD operations<\/li>\n<\/ul>\n<p>Let\u2019s start creating Laravel Vue Js SPA CRUD application gradually.<\/p>\n<h2>Install Laravel App<\/h2>\n<p>Open terminal further run below command to manifest a new laravel project, ignore this step if project is already installed:<\/p>\n<pre class=\"  language-bash\"><code class=\"  language-bash\">composer create-project laravel\/laravel laravel-vue-crud --prefer-dist<\/code><\/pre>\n<h2>Database Connection<\/h2>\n<p>This step explains how to make database connection by adding database name, username and password in <strong>.env<\/strong> config file of your project:<\/p>\n<pre class=\" language-markup\"><code class=\" language-properties\"><span class=\"token attr-name\">DB_CONNECTION<\/span><span class=\"token punctuation\">=<\/span><span class=\"token attr-value\">mysql<\/span>\n<span class=\"token attr-name\">DB_HOST<\/span><span class=\"token punctuation\">=<\/span><span class=\"token attr-value\">127.0.0.1<\/span>\n<span class=\"token attr-name\">DB_PORT<\/span><span class=\"token punctuation\">=<\/span><span class=\"token attr-value\">3306<\/span>\n<span class=\"token attr-name\">DB_DATABASE<\/span><span class=\"token punctuation\">=<\/span><span class=\"token attr-value\">db<\/span>\n<span class=\"token attr-name\">DB_USERNAME<\/span><span class=\"token punctuation\">=<\/span><span class=\"token attr-value\">root<\/span>\n<span class=\"token attr-name\">DB_PASSWORD<\/span><span class=\"token punctuation\">=<\/span><\/code><\/pre>\n<p>If you are using MAMP local server in macOs; make sure to append UNIX_SOCKET and DB_SOCKET below database credentials in <strong>.env <\/strong>file.<\/p>\n<pre class=\"language-bash\" tabindex=\"0\"><code class=\"language-bash\"><span class=\"token assign-left variable\">UNIX_SOCKET<\/span><span class=\"token operator\">=<\/span>\/Applications\/MAMP\/tmp\/mysql\/mysql.sock\n<span class=\"token assign-left variable\">DB_SOCKET<\/span><span class=\"token operator\">=<\/span>\/Applications\/MAMP\/tmp\/mysql\/mysql.sock<\/code><\/pre>\n<h2>Set Up Model and Run Migration<\/h2>\n<p>Run the below process to respectively create the Model (database table) and migration file:<\/p>\n<pre class=\"  language-bash\"><code class=\"  language-bash\">php artisan make:model Product -m<\/code><\/pre>\n<p>Add following code in <strong>database\/migrations\/create_products_table.php<\/strong>:<\/p>\n<pre class=\" language-markup\"><code class=\" language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Database<span class=\"token punctuation\"><\/span>Migrations<span class=\"token punctuation\"><\/span>Migration<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Database<span class=\"token punctuation\"><\/span>Schema<span class=\"token punctuation\"><\/span>Blueprint<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Support<span class=\"token punctuation\"><\/span>Facades<span class=\"token punctuation\"><\/span>Schema<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">CreateProductsTable<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Migration<\/span>\n<span class=\"token punctuation\">{<\/span>\n    \n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">up<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        <span class=\"token class-name static-context\">Schema<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">create<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'products'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token class-name type-declaration\">Blueprint<\/span> <span class=\"token variable\">$table<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token variable\">$table<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">id<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token variable\">$table<\/span><span class=\"token operator\">-><\/span><span class=\"token keyword type-declaration\">string<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'name'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token variable\">$table<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'detail'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>            \n            <span class=\"token variable\">$table<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">timestamps<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    \n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">down<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        <span class=\"token class-name static-context\">Schema<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">dropIfExists<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'products'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p>Define Product table values in <strong>app\/Models\/Product.php<\/strong>:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">namespace<\/span> <span class=\"token package\">App<span class=\"token punctuation\"><\/span>Models<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Database<span class=\"token punctuation\"><\/span>Eloquent<span class=\"token punctuation\"><\/span>Factories<span class=\"token punctuation\"><\/span>HasFactory<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Database<span class=\"token punctuation\"><\/span>Eloquent<span class=\"token punctuation\"><\/span>Model<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Product<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Model<\/span>\n<span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">use<\/span> <span class=\"token package\">HasFactory<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">protected<\/span> <span class=\"token variable\">$fillable<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n        <span class=\"token string single-quoted-string\">'name'<\/span><span class=\"token punctuation\">,<\/span> \n        <span class=\"token string single-quoted-string\">'detail'<\/span>\n    <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>    \n<span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p>Next, you need to evoke migration with below command:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-bash\">php artisan migrate<\/code><\/pre>\n<h2>Create Product Controller<\/h2>\n<p>You need to create the product controller and define the CRUD operations methods:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-bash\">php artisan make:controller ProductController<\/code><\/pre>\n<p>Open and update the below code in <strong>appHttpControllersProductController.php<\/strong>:<\/p>\n<pre class=\" language-markup\"><code class=\" language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">namespace<\/span> <span class=\"token package\">App<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Controllers<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Request<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">App<span class=\"token punctuation\"><\/span>Models<span class=\"token punctuation\"><\/span>Product<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ProductController<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Controller<\/span>\n<span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">index<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        <span class=\"token variable\">$products<\/span> <span class=\"token operator\">=<\/span> <span class=\"token class-name static-context\">Product<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">toArray<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">array_reverse<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$products<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>      \n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">store<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name type-declaration\">Request<\/span> <span class=\"token variable\">$request<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        <span class=\"token variable\">$product<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Product<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span>\n            <span class=\"token string single-quoted-string\">'name'<\/span> <span class=\"token operator\">=><\/span> <span class=\"token variable\">$request<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">input<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'name'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n            <span class=\"token string single-quoted-string\">'detail'<\/span> <span class=\"token operator\">=><\/span> <span class=\"token variable\">$request<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">input<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'detail'<\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token variable\">$product<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">response<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'Product created!'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">show<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$id<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        <span class=\"token variable\">$product<\/span> <span class=\"token operator\">=<\/span> <span class=\"token class-name static-context\">Product<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$id<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">response<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$product<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$id<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token class-name type-declaration\">Request<\/span> <span class=\"token variable\">$request<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        <span class=\"token variable\">$product<\/span> <span class=\"token operator\">=<\/span> <span class=\"token class-name static-context\">Product<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$id<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token variable\">$product<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$request<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">all<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">response<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'Product updated!'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n    <span class=\"token keyword\">public<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">destroy<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$id<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        <span class=\"token variable\">$product<\/span> <span class=\"token operator\">=<\/span> <span class=\"token class-name static-context\">Product<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$id<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token variable\">$product<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">response<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'Product deleted!'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<h2>Create CRUD Routes<\/h2>\n<p>Open <strong>routes\/web.php<\/strong> file, in here; you have to define the following route:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Support<span class=\"token punctuation\"><\/span>Facades<span class=\"token punctuation\"><\/span>Route<\/span><span class=\"token punctuation\">;<\/span>\n\n \n<span class=\"token class-name static-context\">Route<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'{any}'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token function\">view<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'app'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">where<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'any'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string single-quoted-string\">'.*'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p>Next, you need to open the <strong>routes\/api.php<\/strong> file. First, import the product controller on top, then define the CRUD API routes in the route group method as given below:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Request<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Support<span class=\"token punctuation\"><\/span>Facades<span class=\"token punctuation\"><\/span>Route<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">App<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Controllers<span class=\"token punctuation\"><\/span>ProductController<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token class-name static-context\">Route<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">middleware<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'api'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-><\/span><span class=\"token function\">group<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">function<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token class-name static-context\">Route<\/span><span class=\"token operator\">::<\/span><span class=\"token function\">resource<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string single-quoted-string\">'products'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token class-name static-context\">ProductController<\/span><span class=\"token operator\">::<\/span><span class=\"token keyword\">class<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<h2>Install Laravel Vue UI<\/h2>\n<p>Run composer command to install Vue UI in laravel, it will manifest vue laravel scaffold:<\/p>\n<pre class=\"  language-bash\"><code class=\"  language-bash\">composer require laravel\/ui<\/code><\/pre>\n<pre class=\"  language-bash\"><code class=\"  language-bash\">php artisan ui vue<\/code><\/pre>\n<p>After that, use the command to install the vue router and vue axios packages. These packages are used to consume Laravel CRUD APIs.<\/p>\n<pre class=\" language-markup\"><code class=\" language-bash\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span> vue-router vue-axios<\/code><\/pre>\n<p>Subsequently, execute the command to install npm packages:<\/p>\n<pre class=\"  language-bash\"><code class=\"  language-bash\"><span class=\"token function\">npm<\/span> <span class=\"token function\">install<\/span><\/code><\/pre>\n<p>The npm run watch command compiles the assets, not just that with run watch command you don\u2019t fret about re-run the compiler over and over again.<\/p>\n<pre class=\" language-markup\"><code class=\"  language-bash\"><span class=\"token function\">npm<\/span> run <span class=\"token function\">watch<\/span><\/code><\/pre>\n<h2>Initiate Vue in Laravel<\/h2>\n<p>To set up a vue application in Laravel, you have to create a layout folder in the resources\/views directory and create an app.blade.php file within the layout folder.<\/p>\n<p>Place below code in <strong>resources\/views\/layout\/app.blade.php<\/strong> file:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-php\"><span class=\"token operator\"><<\/span><span class=\"token operator\">!<\/span>doctype html<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>html lang<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"{{ str_replace('_', '-', app()->getLocale()) }}\"<\/span><span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>head<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>meta charset<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"utf-8\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>meta name<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"viewport\"<\/span> content<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"width=device-width, initial-scale=1\"<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>meta name<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"csrf-token\"<\/span> value<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"{{ csrf_token() }}\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>title<span class=\"token operator\">><\/span>Vue <span class=\"token constant\">JS<\/span> <span class=\"token constant\">CRUD<\/span> Operations in Laravel<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>title<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>link href<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"{{ mix('css\/app.css') }}\"<\/span> type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"text\/css\"<\/span> rel<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"stylesheet\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>head<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span>body<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>div id<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"app\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>script src<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"{{ mix('js\/app.js') }}\"<\/span> type<span class=\"token operator\">=<\/span><span class=\"token string double-quoted-string\">\"text\/javascript\"<\/span><span class=\"token operator\">><\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>body<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>html<span class=\"token operator\">><\/span><\/code><\/pre>\n<h2>Crete Vue CRUD Components<\/h2>\n<p>Next, you have to add the <code>router-view<\/code> directive in <strong>App.vue<\/strong> file; this template will help invoke all the vue routes associated with the components.<\/p>\n<p>So, create App.js file in resources\/js folder, put the below code in <strong>resources\/js\/App.js<\/strong> file:<\/p>\n<pre class=\" language-markup\"><code class=\" language-javascript\"><span class=\"token operator\"><<\/span>template<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"container\"<\/span><span class=\"token operator\">><\/span> \n        <span class=\"token operator\"><<\/span>nav <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"navbar navbar-expand-lg navbar-light bg-light\"<\/span><span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"collapse navbar-collapse\"<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"navbar-nav\"<\/span><span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>router<span class=\"token operator\">-<\/span>link to<span class=\"token operator\">=<\/span><span class=\"token string\">\"\/\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"nav-item nav-link\"<\/span><span class=\"token operator\">><\/span>Products List<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>router<span class=\"token operator\">-<\/span>link<span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>router<span class=\"token operator\">-<\/span>link to<span class=\"token operator\">=<\/span><span class=\"token string\">\"\/create\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"nav-item nav-link\"<\/span><span class=\"token operator\">><\/span>Create Product<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>router<span class=\"token operator\">-<\/span>link<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>nav<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>router<span class=\"token operator\">-<\/span>view<span class=\"token operator\">><\/span> <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>router<span class=\"token operator\">-<\/span>view<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>template<span class=\"token operator\">><\/span>\n \n<span class=\"token operator\"><<\/span>script<span class=\"token operator\">><\/span>\n    <span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span><\/code><\/pre>\n<p>Now, you need to create the following vue js component files inside the <strong>resources\/js\/components<\/strong> folder:<\/p>\n<ul>\n<li>AllProduct.vue<\/li>\n<li>CreateProduct.vue<\/li>\n<li>EditProduct.vue<\/li>\n<\/ul>\n<p>Add code in <strong>resources\/js\/components\/AllProduct.vue<\/strong> file; in here we are getting all data from database and deleting single product object from database through vue component.<\/p>\n<pre class=\" language-markup\"><code class=\"  language-javascript\"><span class=\"token operator\"><<\/span>template<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>h2 <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"text-center\"<\/span><span class=\"token operator\">><\/span>Products List<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>h2<span class=\"token operator\">><\/span>\n \n        <span class=\"token operator\"><<\/span>table <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"table\"<\/span><span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>thead<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>tr<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>th<span class=\"token operator\">><\/span><span class=\"token constant\">ID<\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>th<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>th<span class=\"token operator\">><\/span>Name<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>th<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>th<span class=\"token operator\">><\/span>Detail<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>th<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span><span class=\"token operator\">!<\/span><span class=\"token operator\">--<\/span> <span class=\"token operator\"><<\/span>th<span class=\"token operator\">><\/span>Actions<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>th<span class=\"token operator\">><\/span> <span class=\"token operator\">--<\/span><span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>tr<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>thead<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>tbody<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>tr v<span class=\"token operator\">-<\/span><span class=\"token keyword\">for<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"product in products\"<\/span> <span class=\"token operator\">:<\/span>key<span class=\"token operator\">=<\/span><span class=\"token string\">\"product.id\"<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>td<span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> product<span class=\"token punctuation\">.<\/span>id <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>td<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>td<span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> product<span class=\"token punctuation\">.<\/span>name <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>td<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>td<span class=\"token operator\">><\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span> product<span class=\"token punctuation\">.<\/span>detail <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>td<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>td<span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"btn-group\"<\/span> role<span class=\"token operator\">=<\/span><span class=\"token string\">\"group\"<\/span><span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>router<span class=\"token operator\">-<\/span>link <span class=\"token operator\">:<\/span>to<span class=\"token operator\">=<\/span><span class=\"token string\">\"{name: 'edit', params: { id: product.id }}\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"btn btn-success\"<\/span><span class=\"token operator\">><\/span>Edit<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>router<span class=\"token operator\">-<\/span>link<span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>button <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"btn btn-danger\"<\/span> @click<span class=\"token operator\">=<\/span><span class=\"token string\">\"deleteProduct(product.id)\"<\/span><span class=\"token operator\">><\/span>Delete<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>td<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>tr<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>tbody<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>table<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>template<span class=\"token operator\">><\/span>\n \n<span class=\"token operator\"><<\/span>script<span class=\"token operator\">><\/span>\n    <span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span>\n                products<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span>\n            <span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n        <span class=\"token function\">created<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>axios\n                <span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'http:\/\/localhost:8000\/api\/products\/'<\/span><span class=\"token punctuation\">)<\/span>\n                <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>products <span class=\"token operator\">=<\/span> response<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">;<\/span>\n                <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n        methods<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token function\">deleteProduct<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">id<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> \n                <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>axios\n                    <span class=\"token punctuation\">.<\/span><span class=\"token function\">delete<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">http:\/\/localhost:8000\/api\/products\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span>\n                    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n                        <span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>products<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">data<\/span> <span class=\"token operator\">=><\/span> data<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">indexOf<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n                        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>products<span class=\"token punctuation\">.<\/span><span class=\"token function\">splice<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span>\n                    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span><\/code><\/pre>\n<p>Place code in <strong>resources\/js\/components\/CreateProduct.vue<\/strong> file:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-javascript\"><span class=\"token operator\"><<\/span>template<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>h3 <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"text-center\"<\/span><span class=\"token operator\">><\/span>Create Product<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>h3<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"row\"<\/span><span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"col-md-6\"<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>form @submit<span class=\"token punctuation\">.<\/span>prevent<span class=\"token operator\">=<\/span><span class=\"token string\">\"addProduct\"<\/span><span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"form-group\"<\/span><span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>label<span class=\"token operator\">><\/span>Name<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>label<span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string\">\"text\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"form-control\"<\/span> v<span class=\"token operator\">-<\/span>model<span class=\"token operator\">=<\/span><span class=\"token string\">\"product.name\"<\/span><span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"form-group\"<\/span><span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>label<span class=\"token operator\">><\/span>Detail<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>label<span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string\">\"text\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"form-control\"<\/span> v<span class=\"token operator\">-<\/span>model<span class=\"token operator\">=<\/span><span class=\"token string\">\"product.detail\"<\/span><span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>button type<span class=\"token operator\">=<\/span><span class=\"token string\">\"submit\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"btn btn-primary\"<\/span><span class=\"token operator\">><\/span>Create<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>form<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>template<span class=\"token operator\">><\/span>\n \n<span class=\"token operator\"><<\/span>script<span class=\"token operator\">><\/span>\n    <span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span>\n                product<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span>\n            <span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n        methods<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token function\">addProduct<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n                <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>axios\n                    <span class=\"token punctuation\">.<\/span><span class=\"token function\">post<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'http:\/\/localhost:8000\/api\/products'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>product<span class=\"token punctuation\">)<\/span>\n                    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">response<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">(<\/span>\n                        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$router<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> name<span class=\"token operator\">:<\/span> <span class=\"token string\">'home'<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n                    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n                    <span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">err<\/span> <span class=\"token operator\">=><\/span> console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n                    <span class=\"token punctuation\">.<\/span><span class=\"token function\">finally<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>loading <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">)<\/span>\n            <span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span><\/code><\/pre>\n<p>Head over to <strong>resources\/js\/components\/EditProduct.vue<\/strong> template and add the below code:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-javascript\"><span class=\"token operator\"><<\/span>template<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>h3 <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"text-center\"<\/span><span class=\"token operator\">><\/span>Edit Product<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>h3<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"row\"<\/span><span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"col-md-6\"<\/span><span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span>form @submit<span class=\"token punctuation\">.<\/span>prevent<span class=\"token operator\">=<\/span><span class=\"token string\">\"updateProduct\"<\/span><span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"form-group\"<\/span><span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>label<span class=\"token operator\">><\/span>Name<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>label<span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string\">\"text\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"form-control\"<\/span> v<span class=\"token operator\">-<\/span>model<span class=\"token operator\">=<\/span><span class=\"token string\">\"product.name\"<\/span><span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>div <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"form-group\"<\/span><span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>label<span class=\"token operator\">><\/span>Detail<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>label<span class=\"token operator\">><\/span>\n                        <span class=\"token operator\"><<\/span>input type<span class=\"token operator\">=<\/span><span class=\"token string\">\"text\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"form-control\"<\/span> v<span class=\"token operator\">-<\/span>model<span class=\"token operator\">=<\/span><span class=\"token string\">\"product.detail\"<\/span><span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n                    <span class=\"token operator\"><<\/span>button type<span class=\"token operator\">=<\/span><span class=\"token string\">\"submit\"<\/span> <span class=\"token keyword\">class<\/span><span class=\"token operator\">=<\/span><span class=\"token string\">\"btn btn-primary\"<\/span><span class=\"token operator\">><\/span>Update<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">><\/span>\n                <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>form<span class=\"token operator\">><\/span>\n            <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n        <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n    <span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">><\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>template<span class=\"token operator\">><\/span>\n \n<span class=\"token operator\"><<\/span>script<span class=\"token operator\">><\/span>\n    <span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span>\n                product<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span>\n            <span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n        <span class=\"token function\">created<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>axios\n                <span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">http:\/\/localhost:8000\/api\/products\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$route<span class=\"token punctuation\">.<\/span>params<span class=\"token punctuation\">.<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span>\n                <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">res<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>product <span class=\"token operator\">=<\/span> res<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">;<\/span>\n                <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n        methods<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token function\">updateProduct<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n                <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>axios\n                    <span class=\"token punctuation\">.<\/span><span class=\"token function\">patch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">http:\/\/localhost:8000\/api\/products\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$route<span class=\"token punctuation\">.<\/span>params<span class=\"token punctuation\">.<\/span>id<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>product<span class=\"token punctuation\">)<\/span>\n                    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">res<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=><\/span> <span class=\"token punctuation\">{<\/span>\n                        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>$router<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> name<span class=\"token operator\">:<\/span> <span class=\"token string\">'home'<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n                    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token punctuation\">}<\/span>\n        <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token operator\"><<\/span><span class=\"token operator\">\/<\/span>script<span class=\"token operator\">><\/span><\/code><\/pre>\n<h2>Create Vue CRUD Routes<\/h2>\n<p>In this step, you have to create vue routes, create routes.js inside resources\/js directory, add the code in the <strong>resources\/js\/routes.js<\/strong> file:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-javascript\"><span class=\"token keyword\">import<\/span> AllProduct <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/components\/AllProduct.vue'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> CreateProduct <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/components\/CreateProduct.vue'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> EditProduct <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/components\/EditProduct.vue'<\/span><span class=\"token punctuation\">;<\/span>\n \n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> routes <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        name<span class=\"token operator\">:<\/span> <span class=\"token string\">'home'<\/span><span class=\"token punctuation\">,<\/span>\n        path<span class=\"token operator\">:<\/span> <span class=\"token string\">'\/'<\/span><span class=\"token punctuation\">,<\/span>\n        component<span class=\"token operator\">:<\/span> AllProduct\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        name<span class=\"token operator\">:<\/span> <span class=\"token string\">'create'<\/span><span class=\"token punctuation\">,<\/span>\n        path<span class=\"token operator\">:<\/span> <span class=\"token string\">'\/create'<\/span><span class=\"token punctuation\">,<\/span>\n        component<span class=\"token operator\">:<\/span> CreateProduct\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">{<\/span>\n        name<span class=\"token operator\">:<\/span> <span class=\"token string\">'edit'<\/span><span class=\"token punctuation\">,<\/span>\n        path<span class=\"token operator\">:<\/span> <span class=\"token string\">'\/edit\/:id'<\/span><span class=\"token punctuation\">,<\/span>\n        component<span class=\"token operator\">:<\/span> EditProduct\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<h2>Define Vue App.js<\/h2>\n<p>This final step brings you to the point where you must include the required packages in the app.js file. Without further ado, please add the following code in the <strong>resources\/js\/app.js<\/strong> file:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-javascript\">\n<span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.\/bootstrap'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\nwindow<span class=\"token punctuation\">.<\/span>Vue <span class=\"token operator\">=<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'vue'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> App <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/App.vue'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> VueAxios <span class=\"token keyword\">from<\/span> <span class=\"token string\">'vue-axios'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> VueRouter <span class=\"token keyword\">from<\/span> <span class=\"token string\">'vue-router'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> axios <span class=\"token keyword\">from<\/span> <span class=\"token string\">'axios'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> routes <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">'.\/routes'<\/span><span class=\"token punctuation\">;<\/span>\n\nVue<span class=\"token punctuation\">.<\/span><span class=\"token function\">use<\/span><span class=\"token punctuation\">(<\/span>VueRouter<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\nVue<span class=\"token punctuation\">.<\/span><span class=\"token function\">use<\/span><span class=\"token punctuation\">(<\/span>VueAxios<span class=\"token punctuation\">,<\/span> axios<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n \n<span class=\"token keyword\">const<\/span> router <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">VueRouter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\n    mode<span class=\"token operator\">:<\/span> <span class=\"token string\">'history'<\/span><span class=\"token punctuation\">,<\/span>\n    routes<span class=\"token operator\">:<\/span> routes\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n \n<span class=\"token keyword\">const<\/span> app <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Vue<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\n    el<span class=\"token operator\">:<\/span> <span class=\"token string\">'#app'<\/span><span class=\"token punctuation\">,<\/span>\n    router<span class=\"token operator\">:<\/span> router<span class=\"token punctuation\">,<\/span>\n    <span class=\"token function-variable function\">render<\/span><span class=\"token operator\">:<\/span> <span class=\"token parameter\">h<\/span> <span class=\"token operator\">=><\/span> <span class=\"token function\">h<\/span><span class=\"token punctuation\">(<\/span>App<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<h2>Start Laravel Vue CRUD App<\/h2>\n<p>To start the CRUD app, you need to run the two following commands respectively in two different terminals simultaneously:<\/p>\n<pre class=\" language-markup\"><code class=\" language-bash\"><span class=\"token function\">npm<\/span> run <span class=\"token function\">watch<\/span><\/code><\/pre>\n<pre class=\" language-markup\"><code class=\"  language-bash\">php artisan serve<\/code><\/pre>\n<p>Open the URL in the browser:<\/p>\n<pre class=\" language-markup\"><code class=\"  language-bash\">http:\/\/127.0.0.1:8000<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2020\/12\/12514-01.jpg\" alt=\"Laravel Vue CRUD App\" width=\"750\" height=\"230\" class=\"alignnone size-full wp-image-12531\" srcset=\"https:\/\/www.positronx.io\/wp-content\/uploads\/2020\/12\/12514-01.jpg 750w, https:\/\/www.positronx.io\/wp-content\/uploads\/2020\/12\/12514-01-302x93.jpg 302w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\"><\/p>\n<h2>Summary<\/h2>\n<p>Ultimately this tutorial is over. We hope that you have understood how to create a laravel vue js CRUD single page application and how to consume REST API in the laravel Vue app with the help of the given above detailed steps.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Throughout this Laravel Vue js CRUD example tutorial, you will see and understand how to build Create, Read, Update, and Delete API and how to consume APIs to perform CRUD [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":436,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,14],"tags":[],"class_list":["post-435","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-tutorial","clearfix"],"_links":{"self":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":1,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/435\/revisions\/655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/media\/436"}],"wp:attachment":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}