How to use Vue.js in a PHP your application

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.

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 `




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

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




Now, before the closing `` add the following script to create a Vue.js instance:




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 `` 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 `` add the following expression to display the `message` variable declared in your Vue instance:




## 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.

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




Next, inside the `` before the closing `` tag, create two Vue.js components:

const Home = { template: ’ Home page
’ };
const About = { template: ’ About page
’ };




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. 

I hope this tutorial will surely help and you if you liked this post, thank for reading !

#vue-js #php #web-development