If you want to learn vue-router and how it works, then check out my article on how to use a vue router in VueJS. On the other hand, if you want to understand the basics of Vue, then please check out my other tutorial Vuejs Tutorial With Example.
Vue-resource in Vue.js
The vue-resource is a well-known HTTP request library in VueJS. Of course, you can also use axios, jQuery if you want, but today we will attempt HTTP calls using vue-resource.
For the backend API, we are using Laravel Framework. For this project, we are using Vue along with vue-router and vue-resource.
Step 1: Create a project folder.
Now, create one project folder called VueResource.
mkdir VueResource
In root, create one file call package.json and copy the following code to it.
{
"name": "vueresorce",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-runtime": "^6.25.0",
"vue-loader": "^13.0.2",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
"dependencies": {
"vue": "^2.4.2",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0"
}
}
Go to your terminal and type following command.
npm install
It will install all of our NPM dependencies in our project.
The next step would be to configure the webpack so, in the root folder, create one file called webpack.config.js and put the following code in it.
// webpack.config.js
module.exports = {
// This is the "main" file which should include all other modules
entry: './src/main.js',
// Where should the compiled file go?
output: {
filename: 'bundle.js'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
// Special compilation rules
loaders: [
{
// Ask webpack to check: If this file ends with .js, then apply some transforms
test: /\.js$/,
// Transform it with babel
loader: 'babel-loader',
// don't transform node_modules folder (which don't need to be compiled)
exclude: /node_modules/
},
{
// Ask webpack to check: If this file ends with .vue, then apply some transforms
test: /\.vue$/,
// don't transform node_modules folder (which don't need to be compiled)
exclude: /(node_modules|bower_components)/,
// Transform it with vue
use: {
loader: 'vue-loader'
}
}
]
},
devServer: {
port: 3000
}
}
Webpack is a module bundler along without main javascript file it will compile to ES5 with the help of Babel and run the code in any of the older browsers. So webpack will create the bundle.js file.
Step 2: Create index.html and main.js file.
Create one folder called src in your root directory and in that create another folder called components.
Also, create one index.html file in a root folder.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-resource example in VueJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
Next, create a main.js file inside src directory, and this file would be our final javascript file in the sense of development, and it will be compiled with webpack and generates the bundle.js file.
Now, create one div tag inside the index.html and give id app.
<!-- index.html -->
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
In main.js file put the following code in it.
// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueResource from 'vue-resource';
Vue.use(VueResource);
var router = new VueRouter({mode: 'history'});
new Vue(Vue.util.extend({ router })).$mount('#app');
We have required all of our dependencies in this file like vue-router and vue-resource. Also created one router object and instantiated our Vue instance. Our Vue instance is bound to app id which is assigned to div tag in the index.html.
Step 3: Set up a router and create the App.vue file.
Further, step would be to create one App.vue file inside src folder and not in components folder.
// App.vue
<template>
<div class="container">
<div id="page">
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<script>
export default{
}
</script>
This file is our container file, and all the components are rendered within this file. It is the container for our application and when the route changes the underlying components will also change, but here the point is that the page will not be refresh.
<router-view></router-view> is the tag in which the route components will be rendered, and we can perform different actions and operations within that component.
We need to include this component in our main.js file so that routes can be configured properly.
// main.js
import App from './App.vue';
new Vue(Vue.util.extend({ router }, App)).$mount('#app');
At the instance creation, I have passed the App component to the application.
We have registered the routes, but we have not defined yet, so first, we need to define an array of routes and then we will pass it as a constructor argument while creating a router object and that’s how our routing task will be complete.
// main.js
const routes = [
{
name: 'Products',
path: '/',
component: Products
}
];
var router = new VueRouter({ mode: 'history', routes: routes });
new Vue(Vue.util.extend({ router }, App)).$mount('#app');
Here, we have not created Products component yet, but We have registered the route and also pass this array to the router constructor. So first create that Products.vue component.
// Products.vue
<template>
<div>
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</template>
<script>
export default{
}
</script>
We have created the lists of products table, but we have not data yet because we need to fetch it from the Laravel backend.
Import this component into the main.js file where we have registered the array of routes.
// main.js
import Products from './components/Products.vue';
Step 4: Create a Laravel backend.
Create a Laravel backend for the data. So first step would be to download this framework from its original website.
composer create-project laravel/laravel VueResourceLaravel --prefer-dist
Setup the database in .env file. Now create the Product model and migrations by typing following command.
php artisan make:model Product -m
It will also create a products migration. Finally, we need to define the columns in that migrations.
<?php
// create_products_migrations_table.php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->integer('price');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}
Now, run the following command to run the migrations.
php artisan migrate
It will create the three tables including products. If you have set up database correctly the, It will run perfectly.
Also, we need to create controller file for our products data so type following command in terminal.
php artisan make:controller ProductController --resource
Step 5: Seed the data in the database.
Now, we need to seed the fake data in the products table. So type the following command in your terminal to fill the fake data using Database Seeder.
php artisan make:seeder ProductsTableSeeder
Now, we need to write some insert queries in that file. Here we can also use model factory for that, but it is another day topic. So today, we will generate fake data for the products.
Go to the ProductsTableSeeder.php file inside database >> seeds >> ProductsTableSeeder
<?php
// ProductsTableSeeder
use Illuminate\Database\Seeder;
class ProductsTableSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
\DB::table('products')->insert([
'name' => str_random(10),
'price' => rand()
]);
\DB::table('products')->insert([
'name' => str_random(10),
'price' => rand()
]);
\DB::table('products')->insert([
'name' => str_random(10),
'price' => rand()
]);
\DB::table('products')->insert([
'name' => str_random(10),
'price' => rand()
]);
\DB::table('products')->insert([
'name' => str_random(10),
'price' => rand()
]);
\DB::table('products')->insert([
'name' => str_random(10),
'price' => rand()
]);
\DB::table('products')->insert([
'name' => str_random(10),
'price' => rand()
]);
}
}
Next go to the database >> seeds >> DatabaseSeeder.php. Put the following code on it.
<?php
// DatabaseSeeder.php
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$this->call(ProductsTableSeeder::class);
}
Now, go to your terminal and type following command.
php artisan db:seed
It will generate the data according to our insertion defined in ProductsTableSeeder.php file.
Step 6: Setup routes and controllers for backend data.
Remember, we are creating the API at the backend of Laravel. So in Laravel, you can use api.php for routing and not web.php because we are just calling an API. So go to the routes >> api.php and define one route.
// routes >> api.php
Route::get('products','ProductController@index');
In ProductController, first, we need to include the Product.php model that resides in the app folder and then fire a query to retrieve the data.
<?php
// ProductController.php
use App\Product;
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$products = Product::all();
return response()->json($products);
}
It will in return response in JSON format. All the products are sent in JSON and Frontend VueJS will consume it and it will display the Products.
Step 7: Need to create product’s index component.
Now, we need to set up API point in VueJS. So, go to the VueJS project and in that copy the whole code in Products.vue file.
// Products.vue
<template>
<div>
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</template>
<script>
export default{
data(){
return{
products: []
}
},
created: function()
{
this.fetchProducts();
},
methods: {
fetchProducts(){
{
this.$http.get('http://localhost:8000/api/products').then((response) => {
this.products = response.body;
});
}
}
}
}
</script>
Here, I have used HTTP Get request from the vue-resource library. The API point is Laravel’s API route.
Also, you need to start the Laravel server by typing following command in Laravel Project.
php artisan serve
Now, if you switch the following URL: http://localhost:3000, you got an error in the Console panel.
This error is caused by CORS security. When Browser hits the request to another domain, by default it denies the request.
We need to allow this origin to Laravel server side. So we need to create one middleware at the backend and apply this middleware to each and every API request. By putting this middleware we are explicitly told Laravel that we are allowing this request to access our resources.
Download the following Laravel Specific CORS package to avoid this issue and follow the steps.
composer require barryvdh/laravel-cors
Add the Cors\ServiceProvider to your config/app.php provider’s array
Barryvdh\Cors\ServiceProvider::class,
To allow CORS for all your routes, add the HandleCors middleware in the $middleware property of app/Http/Kernel.phpclass:
protected $middleware = [
// ...
\Barryvdh\Cors\HandleCors::class,
];
You can publish the config using this command:
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
Now, try again from the VueJS project and you will definitely get the data.
Step 8: Fetch and display data.
Now, fill this data in the table. Next, go to the Products.vue file and update the whole code by following the code.
// Products.vue
<template>
<div>
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr v-for="product in products">
<td>{{ product.id }}</td>
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default{
data(){
return{
products: []
}
},
created: function()
{
this.fetchProducts();
},
methods: {
fetchProducts(){
{
this.$http.get('http://localhost:8000/api/products').then((response) => {
console.log(response.body);
this.products = response.body;
});
}
}
}
}
</script>
It will look like this.
So, we have successfully fetch the data from the Laravel Server. Our Tutorial here is complete. You can use Post request with this same method. You need to pass the data object with it and any language backend will handle it perfectly.
Download Vue.js Project On Github
Steps to install
- Clone the repository.
- Go to the project folder and type in terminal “npm install” command.
- Now, start the server by this command: npm start
- Switch to this URL: http://localhost:3000
- It will display nothing until Laravel server is configured correctly. So follow these steps.
Download Laravel Project On Github
Steps:
- Clone the repo.
- Go to the project folder and type this command: composer install.
- Configure the database in the .env file and type this command: php artisan migrate.
- We need to seed the database by typing this command: php artisan db:seed.
- Start the server by the following command: php artisan serve
Хорошего дня.