MENU

Integrating Phalcon, vue components and webpack with code examples

20 Mar 2018 by Anthony Shivakumar
Last updated: 02 Jan 2019
Are you looking for a simple way to get started on making php phalcon and vue.js work in harmony? No theory just code examples? If you have worked on php phalcon and worked a bit on vue.js as individual projects and now feel the need to link these frameworks together, this article is for you. 

You might have gone to the official vue-webpack git page and followed the steps. After getting started with vue, you soon find your self asking, but how to link it with phalcon? 


In my previous articles I wrote more on the theory of how these frameworks work. In this article I will show you how to:

a. Structure your php phalcon project
b. How to structure your *.vue files
c. How to configure webpack, and pakage.json file to generate javascript from *.vue files
d. How to make a simple "hello world ecommerce" application using these frameworks

My job at the end of this article, is to help you, to be a better designer of your applications. This is not an article for "stackoverflow junkies" looking for magic bullets and quick solutions.You sure will get all your questions answered, but it is more important for me to help you to think right. Let us get started connecting the dots. 

On the other hand, This article is not a how to guide on webpack or how node and package.json work. Neither are we going to touch on what is php-phalcon or how vue.js works. A basic understanding of php-phlacon and vue.js will help tremendously. Please read the official documentation. You do not need to know webpack or node.js to get the most out of this article either. Also, we will not be talking about css. The css design is beyond the scope of this article. 

Few rules to keep in mind before we get started: For more on the theory check this article out.
1. php is server code complied to HTML. (So fundamental,  yet many ask questions related to this core concept.) 
2. *,vue components are compiled into javascript files (vue, react angular or whatever you want to call it, HELP WRITE MODULAR JAVASCRIPT CODE. So fundamental, yet many ask questions that rely on this principle) 
3.  webpack and node.js helps in compiling *.vue files into javascript

I emphasis the rules, because if the rules are very clear and understood deeply, this article really has no value. You can literally create what you want by reading the official documentation of the frameworks. Hence, it is my goal to help you to think right and be a better designer of your applications.      

1. The application 
What are we going to build?
The aim of this application is to make an eCommerce website where php Phalcon and vue.js users can buy stunning website templates. I like to have grand ideas. It makes the project more real. 

In this tutorial, we will be focusing on a small part of this eCommerce application. We will try to populate a few website templates as image thumbnails using  vue.js + phpphalcon.  It is good to decide in the beginning what part of the html we want PHP Phalcon to control and which part of the HTML, vue should take control. A little planning can go a long way.

 


Let us divide the application into 3 section. Accordingly we can plan out the vue components. 
1. The nav bar at the top
2. The center product display
3. The left side bar

For this article, let us focus on just the center product display section. Our goal is to make vue.js control this section and populate the details.  

We will demonstrate:
1. How the website should be designed - the code structure the controller and actions in php-phalcon and how to design data objects.
2. How php phalcon will give vue.js control to manipulate dom objects
3. How vue.js will take control and populate the Center product display (Best selling website templates section) 
4. How the data is passed from vue to phalcon using AJAX and JSON objects. (More on this in the next article)

2. The folder structure
Now that we have a high level overview of what we are going to build, let us go right into designing the folder structure. 


The above picture shows the root level folder structure of the whole application. Let us describe each of these directories in detail.
 
1. The app folder is where all our code is going to be written in. This is the directory where all our modification and code changes is going to happen.
2. The node_modules is where all the node installs are going to be. When you do an npm install , this is where all those node modules will be installed. We never have to touch this directory.
3. The public directory is where the web server can access all public files of our application. This is the folder where your index.php file resides, where your public images, css and javascript too reside. Our job is to make sure all *.vue files are compiled into javascript files and they are placed in this directory. 
4. The package.json and webpack.config.js files are placed in the root directory. 

The next question you may have is, where should we place the *.vue files? Let us dive deep into the "app" folder.


Have a directory called vue inside the phalcon main (app) folder. Our goal is to keep all files in one location. You don't want to have vue files in some outside directory, and then try to merge them together. There is a reason behind the madness.

1. You will have a hard time maintaining your vue files. You wont know which vue file corresponds to which php view controller/action as your project expands.
2. You will have a messy and an unmaintainable folder structure.  

As a rule of thumb. Structure your code, based on the application and NOT on the programming language and frameworks. 
The languages and frameworks will keep changing, but the goal of your applications and sub-applications should always be the focus.

Most projects go wrong as they emphasis too much on the framework at hand. Look at your application holistically. What is the goal of your application and from there reverse engineer the structure of your server code and front end code.

Our goal at this stage is not to wonder how webpack or node will work. Our goal is to have a good code directory structure, so that we can work more effectively.

The end goal is to tell webpack to search in the app/vue folder and find the main vue files. Compile this file and all the vue components into the public folder. We then tell index.volt to look for this generated javascript file in the public folder. 

If you have multiple sub-features in your application, then in php-phalcon you would want to have Modules. In this case, your code structure would be something like this:

 

3. Configuring Vue
I bet you have come to read this article just for this section. How the heck do we configure vue to work? Here we go.

Some guidelines:
1. All configuration files will be in the root folder. Not public folder or any other folder. (webpack, package.json, gulp, etc)
2. All generated and public files will be in the public folder
3. All codes irrespective of the languages will be in the app folder

You may have a different code structure based on your application. But this is the structure we will be following in this article.

Step 1:  Install the right dependencies
We need to have webpack, babel, vue-loader 


This is my full package.json configuration file for this application.



After you have this file, you can do an npm install. npm will read this package.json file and automatically install all the dependencies in the node_modules folder. 

This would install webpack, vue-resource, gulp or what ever dependencies you need for your application. 

Step 2: Configure webpack: webpack.config.js

a. Tell webpack where to find the file
b. Tell webpack where to generate the vue files. 


Step3: Configure Vue
Our goal in this step is to make sure that when we execute npm build, we are able to read our vue components and generate files in the right directory.

in the vue folder, create a file called main.js. The below picture should explain the details.

  
Let us test to see if webpack can read our vue file and generate it in the right directory.

After running npm run dev ( which is defined in our package.json file), webpack is able to read our file and generate our shop.bundle.js. We defined how to name our .js file in webpack.config.js under the output->filename tag. Also we named our entry "shop" that is where it gets the name shop.bundle.js.



We now got everything working.

Step 4: Working With Phalcon

3 things needs to be defined in your index.volt file
a. Define the class or id which vue can control. In our case we called our class ".wrap"
b. Define the element vue will take control and populate it
c. Define in index.volt where to find the generated javascript file

Vue.js now has full access to controlling your phpphalcon views.

Step5: Configuring vue and finisinhing up

We create a file in the vue directory called productdisplay.vue. This file will have the logic on how to populate the element.  


in the main.js file, we need to import this *.vue file. 



Step 6: Run our build and lets test it out.



a. Run our build using npm run dev.
b. Test the changes in the web-browser. And Voila, vue is now integrated with php phalcon!
  
Conclusion
IN the next article, we will go deep into how to populate this data from a database and using json objects and AJAX with vue and php phlacon. If you have any questions or better ways of working, please comment below. The best comment, I will send you my personal folder structure.

Next Article

Conclusion:  

Please comment below if you have questions, ideas or how you can apply it. At ANTSAND, we apply everything we preach and teach. What we put out is based on our experience, our failures and success. We love to be transparent, as it really brings out the best in us. 

We will soon be creating a $5 monthly marketing package for our readers. You can pay us for one cup of coffee every month, and in turn we give you strategies, ideas, tactics, mindsets and exercises, you can apply in your business immediately. If you want to know more about it, just type in the comments below, "Coffee with ANTSAND". We would love to hear your feedback.

If you want to read other blogs that might interest you, have a look below.

More Stuff from ANTSAND

Business, UI and UX:

If you are a programmer, you can read more on our Programming blogs:

Life style:


Written by Anthony Shivakumar
Founder, Lead Marketing and Software Developer at ANTSAND

Anthony has a Master Degree in Electrical and Computer Engineering. He has worked in major software firms for the past 15 years and currently runs his own software and marketing company.

He continues to write articles related to marketing, programming, sales and growth hacking.

6 Comments

Emre Eldemir
Apr 04, 2020 External
Nice tutorial
Edi
Sep 06, 2019 External
Nice tutorial, Anthony...

By the way, do you have another approach for connecting Vue with Phalcon PHP which Phalcon purely running as API Json without producing HTML?
Which I mean, all the HTML and frontend stuff is handled by Vue, this for creating SPA/PWA site.
Looking forward to your answer.

Thanks
Edi
Irvv
May 31, 2019 External
Thanks this is helpfull! :D
Omar
Sep 19, 2018 External
I am trying to use phalcon and vue as you but updating all the package and i am getting this error on the console with the file shop.bundle.js

SyntaxError: unexpected token: identifier[Saber más] shop.bundle.js:1:13

---------------------package.json----------

{
"name": "simple-volt",
"version": "1.0.0",
"description": "lllllllllllllll",
"main": "main.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --hot",
"build": "cross-env NODE_ENV=production webpack --progress -hide-modules --hot"
},
"author": "Omar Mexia",
"dependencies": {
"@babel/core": "^7.0.0",
"build": "^0.1.4",
"compass": "^0.1.1",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <=8"
],
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"jquery": "^3.3.1",
"vue-infinite-iscroll": "^0.0.19",
"vue-resource": "^1.5.1",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}

---------------webpack.config.js--------------------------

{
"name": "simple-volt",
"version": "1.0.0",
"description": "llllllllll",
"main": "main.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --hot",
"build": "cross-env NODE_ENV=production webpack --progress -hide-modules --hot"
},
"author": "omb",
"dependencies": {
"@babel/core": "^7.0.0",
"build": "^0.1.4",
"compass": "^0.1.1",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <=8"
],
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"jquery": "^3.3.1",
"vue-infinite-iscroll": "^0.0.19",
"vue-resource": "^1.5.1",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}

Anthony Shivakumar
Mar 26, 2018
Thanks Diplo for your comments.

In the next article I will demonstrate more on how to exchange data between vue components and php-phalcon. Since I am demonstrating an ecommerce application, in the following articles, I will talk a lot more on phalcon multi-modules, code related to routing, security and services and best practices with vue.

Good idea. I will try to integrate a syntax highlighter into my blogs.
Diplo
Mar 25, 2018 External
Hi Anthony,

Just read your first article and now catching-up with this one. The Phalcon multi-module structure misses modules (even the first module): as you have it, it's a one module example. I'm very curious about the next part, to see how do you render the Ajax response (Micro or Multi) and if you will include any Phalcon code related to the routing or services --a bit of Prism.js won't hurt :-)

Cheers and thanks!

Leave a Reply

Make sure you fill in all mandatory fields.Required fields are marked *