Building a Gui application in conjunction with a CMS engine or how to integrate a reactive JS framework into your site

VUE – reactive js framework, which is very popular when creating user interfaces and developing single page applications.

Many web developers use the VUE framework to create modern web applications/sites from scratch, due to its simplicity, speed and dynamism in solving many user tasks.

But here's the challenge!

We have site is a project/online store that is implemented on some php engine (CMS), for example on WordPress, OpenCart, ImageCMS, etc.

There is a need to link to it a specific application written in js using Vue 3, with all its component development approaches.

That is, there is no need to deploy the project from scratch, but to transfer all the functionality from php to the js framework, you understand what it costs ..., and why it is necessary.

Of course, you can connect the CDN link of the framework on the page and use its functionality on your site in such a way as a regular library. But this approach makes it impossible to develop large and extensible, due to its component nature, applications on Vue.

Using an example, let's try to implement this feature by linking the Vue framework version 3 with the ImageCMS CMS engine, which has the CodeIgniter 3 PHP framework under the hood.

Based on the fact that all popular CMS site engines have a similar file structure, the principles and approaches in deploying Vue in your project will be similar. You just need to show some ingenuity, taking into account the synthetic features of your CMS.

So, Let's go!

Step 1 - Install The Node.js:

Node.js is a JavaScript code execution environment based on the V8 engine.

In this example, we will install on Windows (which does not change the essence) - https://nodejs.org/en

Step 2 - Install the Vue CLI:

Vue CLI is a tool for interacting with Vue using the command line of the operating system.

We install using the terminal command line (in this case, the terminal of the VS Code editor), having previously deleted previous versions, if they were installed (npm uninstall vue-cli –g).

npm install -g @vue/cli

We install it globally, as evidenced by the –g flag (for possible use of this utility in all our projects, if necessary).

Our project/website kaktotak.net . But in this case, it does not matter from which position in the terminal (from the root or any other folder) we will enter this command.

After that, we will check the version of the installed utility with the command:

vue --version

Step 3 - Create a project on Vue 3

Before performing this procedure, let's go to the CMS root package. It is more expedient to create a folder for the future Vue project at the top level, naming it, for example, vue.

Go to this folder using our terminal:

And we create a project directly in it, for example, with the default name hello-world, with the command:

vue create hello-world

When installing by default, select the version Vue 3 with default settings.

The project was created in the root folder vue/hello-world.

To make sure of this, in the folder of our project in the terminal, run the command:

npm run serve

It will launch a local development server at http://localhost:8080 , going to which we will see our project.

That is, all the files of the vue project are installed in the specified folder and now you can proceed to its development.

In this form, vue functions only in the dev (development) environment.

Let's compile (assemble) our project and check what happens:

npm run build

When compiling (building webpack), using the package manager npm, the production version files will be placed in the dist folder of our project.

In this form, the pages of the site into which we would like to integrate our vue project will not get access to it. If this can be done, it is manual work, with the need to constantly change the names of js and css files, with each new compilation.

Step 4: Integrate the Vue 3 project into the structure of our website

In our example, you need to access these production files, but from the insert folder of the corporate directory (templates folders) of our CMS engine. The full path is indicated on the skin. The target folder add from the root of the site.

Now we create a site page through the engine admin panel (with which we want to link the vue project), specifying a template for its output, for example - page_ .tpl, which, in turn, through the php include method, we will output our target template service.tpl (IMPORTANT ! - add the div c block to this file id="app", where the Vue application will be mounted).

{include_tpl('insert/calculations_service_payable/572/service.tpl')}

The question now is how to redirect files to this folder when compiling production versions add.

Opening the filevue.config.js (in the folder of our vue project - hello-world) and connect the necessary library path to correctly determine the vue absolute path:

const path = require("path");

And add the following value to the outputDir property of the defineConfig object:

path.resolve(__dirname,"../../templates/corporate/insert/calculations_service_payable/572/add")

Now in the terminal, go to the folder of our project (hello-world) and install the library itself using the command:

npm install path

To check the operation of the Vue project, in the HelloWorld component.vue let's add a result variable with some value to the data() method in the script>/script> block and output it in the template>/template> block.

After saving the changes, let's check the operation of the dev version.

Everything works.

Compiling our Vue project using the command:

npm run build

Thus, all the production version files are already in the add folder of our site.

In order for all file names and their path to be registered automatically when downloading our old file, we will add application/libraries/ to the library file (already of the engine (CMS) itselflib_my.php the following method will be used to solve this problem:

In the template of the service.tpl file, we implement the operation of this method with the following construction:

Now let's load the page of the site to which we have connected the Vue project.

As you can see, everything works. And now it only remains to write the Vue application itself.

Building a Vue application in conjunction with a CMS engine or how to integrate a reactive JS framework into your website - Something like that!