Using Vue.js in PHP Tutorial

In this tutorial, you'll learn how to use Vue.js in/with PHP in your web project(s). Vue.js is a popular progressive library for building modern user interfaces using features like components and virtual DOM.

Also check out: PHP with Vue.js & MySQL: REST API CRUD Tutorial

Prerequisites

Using PHP and Vue.js in your project requires you to have a a few prerequisites.

Obviously, you need to have PHP installed on your local development machine. Head over to the official website for more information about the installation procedure if you don't have PHP installed. You can also follow the official docs for your system to install PHP from using your system package manager.
You need to have a basic working knowledge of PHP and JavaScript.

Other than that, you are good to go!

Creating your PHP/Vue.js Project's Folder

You'll not be using any CLI utilities to generate your project in this tutorial so you'll have to manually create a directory structure for your project. Head over to your terminal and create the following folder:

$ mkdir php-vuejs-project

Next, navigate inside of it and create a js folder:

$ cd php-vuejs-project
$ mkdir js

Getting Vue.js

The Vue.js docs shows different ways to get and include Vue.js in your project(s), such as:

Using the Vue CLI,
Using a <script> tag to include the Vue.js script after you've downloaded in your project's folder,
Using a <script> tag to include Vue.js from a CDN.

Although, it's recommended to use Vue CLI for working with Vue.js you will not be using it in this tutorial. Instead you'll use the classic way of including JavaScript files i.e via the <script> tag.

First, get the Vue.js library from: vuejs.org/js/vue.js and copy it into the js/ folder of your project (make sure you create one first!).

Adding the Main Page

Inside your project's root folder, create an index.php file using the following command:

$ touch index.php

Open the index.php file with your code editor and add the following initial content:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js in PHP</title>
    <script src="js/vue.js"></script>
</head>
<body>
</body>
</html>

You are simply including Vue.js library from the js/ folder of your project.

Next, you need to add a <div> where you can mount your Vue.js application:

<div id="app"></div>

Now, before the closing </body> add the following script to create a Vue.js instance:

<script>
 new Vue({
     el: "#app",
     data: {
        message: 'Hello Vue from PHP!'
     }
 });
</script>

The Vue instance takes an object that contains the following properties:

el: the id of the DOM element where to attach the Vue instance. In this example, you attached the instance to <div> with the app id.
data: an object where you can declare data variables that are used in your Vue.js application. In the example, you added a message variable that holds the Hello Vue from PHP! string.

Next inside the <div id="app"> add the following expression to display the message variable declared in your Vue instance:

 <p>{{ message }}</p>

Serving your PHP/Vue.js Project

Using the PHP built-in development server, you can serve your project by running the following command:

$ php -S localhost:8080

This will start the server from localhost:8080. If you visit this address with your browser you should see the Hello Vue from PHP! message displayed in your page.

Adding Routing with the Vue.js Router

Vue.js provides a powerful client side router to create routing and navigation in your Vue app. Combining the router with Vue components, you can create modern Single Page Applications with Vue and PHP.

Before you can use the Vue Router, you need to download it, next you can create Vue components and map them to different routes. The router will display the right component based on your current browser's URL.

Let's see a quick example of using PHP with Vue.js and Vue Router.

First grab the Vue router from this link.

Next, include the router library after the Vue.js library:

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

Next, inside the <script> before the closing </body> tag, create two Vue.js components:

 const Home = { template: '<div> Home page </div>' };
 const About = { template: '<div> About page </div>' };

You use the template property to add a template for the component. Next, define a routes array with the following objects!

 const routes = [
 { path: '', component: Home },
 { path: '/about', component: About },
 { path: '*', component: Home }
];

Next, create a Router instance and pass in the routes array:

 const router = new VueRouter({
 mode: 'history',
 routes: routes
 });

Finally, create a Vue instance and provide the router instance:

 const app = new Vue({
 router: router
 }).$mount('#app');

That's it, you have added routing with the Vue.js router in your simple PHP application.

Conclusion

In this tutorial, you've seen a simple example of how to use Vue.js in a PHP application. This was mostly about Vue.js code that PHP but this shows how to include Vue.js in PHP. In the next tutorial, you'll see how you can send data from a a Vue.js interface to a PHP back-end and how to consume and display data from PHP in your Vue.js application.

Author: Ahmed Bouchefra Follow @ahmedbouchefra
Date: 18 Nov 2018