How to configure Vue.js in PrestaShop module

In this blog, we will learn how to configure Vue.js in the PrestaShop module. PrestaShop has migrated some pages to Vue.js in the back office (ie: stock and stock movement page). They have also documented on their official site about configuring the Vue.js in the PrestaShop module.

We will follow the same steps to configure Vue.js in our sample module.

Note: You must have nodejs installed on your system to execute and install packages.

1- Install Vue.js CLI tool

To install this tool, you have to run the below command in the terminal:

npm install -g @vue/cli

After running this command, you can check the version of Vue.js CLI tool to using the below command:

vue --version

If you got the version, that means you have succefully installed the Vue.js CLI tool.

For the demo puposes, we have created a simple “wkvue” module with required minimum code to install in the PrestaShop:

class Wkvue extends Module
{
    public function __construct()
    {
        $this->name = 'wkvue';
        $this->tab = 'front_office_features';
        $this->version = '1.0.0';
        $this->author = 'Webkul';
        $this->need_instance = 0;
        $this->bootstrap = true;

        parent::__construct();

        $this->displayName = $this->l('VueJS Module');
        $this->description = $this->l('This module is used for VueJs');

        $this->confirmUninstall = $this->l('Are you sure you want to uninstall my module?');

        $this->ps_versions_compliancy = ['min' => '1.7', 'max' => _PS_VERSION_];
    }
}

After installation of this module, we will create a new Vue project using the below command under the “wkvue” module directory:

vue create dev

During this project creation, you will be asked for the Vue version. We have selected the preset with Vue 2 & Babel for this blog.

After creation of the project, enter to the project directory and execute the build command:

npm run build

This build command compiles our Vue project into . html, . js and . css files that are optimized to run directly in the browser under the public folder.

Till now, we have successfully created independant Vue.js project. Now, we need to integrate this project with the PrestaShop. To do this, we have to make some configuration.

2- Cleanup

First of all, we have to remove the “dev/public” folder and “serve” command from the “package.json” file available in the “dev” folder.

Now, we need to create “views/js/” folder under the “wkvue” folder to store the JavaScript files.

3- Configure Vue project for a PrestaShop context

We will edit the “vue.config.js” file available in the “dev/” folder and replace with the below code snippets:

const path = require('path');

module.exports = {
  chainWebpack: (config) => {
    // Stop generating the HTML page
    config.plugins.delete('html');
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');

    // Allow resolving images in the subfolder src/assets/
    config.resolve.alias.set('@', path.resolve(__dirname, 'src'));
  },
  css: {
    extract: false,
  },
  runtimeCompiler: true,
  productionSourceMap: false,
  filenameHashing: false,
  // These rules allow the files to be compiled and stored in the proper folder
  outputDir: '../views/',
  assetsDir: '',
  publicPath: '../modules/wkvue/views/',
};

After this, we need to replace the package.json scripts with below:

"build": "vue-cli-service build --no-clean",
"lint": "vue-cli-service lint --fix",
"dev": "vue-cli-service build --no-clean --mode development --watch"

As you can see “–watch” flag in the “dev” script. This script allow to compile the JS files, and keep watching at any change that would happen in the project directories. Everytime one file is saved, the compilation will run again immediately.

Run the below command to generated the complied assets:

npm run dev

After running this command, two new compiled JavaScript files are generated in the “view/js” folder:

wkvue/views/js/chunk-vendors.js
wkvue/views/js/app.js

4- Add generated JavaScript files in PrestaShop

Now, we will add these generated JavaScript files in our PrestaShop module. For the demo purposes, we have created “getContent()” method in the main module file and added these scripts:

public function getContent()
{
    $this->context->smarty->assign([
        'pathApp' => $this->getPathUri() . 'views/js/app.js',
        'chunkVendor' => $this->getPathUri() . 'views/js/chunk-vendors.js',
    ]);

    return $this->context->smarty->fetch('module:wkvue/views/templates/admin/configure.tpl');
}

Create a new folder “views/templates/admin/” and create a “configure.tpl” file under this and add the below code:

<link href="{$pathApp|escape:'htmlall':'UTF-8'}" rel=preload as=script>
<div id="app"></div>
<script src="{$chunkVendor|escape:'htmlall':'UTF-8'}"></script>
<script src="{$pathApp|escape:'htmlall':'UTF-8'}"></script>

Now, let’s replace the “wkvue/dev/src/components/HelloWorld.vue” file code with below:

<template>
    <div class="hello-vue">
        <div class="col-md-6 col-md-offset-3">
            <h1>{{ name }}</h1>
            <input type="text" class="form-control" v-model="name" />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                name: 'Hello Vue!'
            }
        }
    }
</script>

Now, if you go to the module configuration page, you will see the below screen:

That’s all about this blog.

If any issue or doubt please feel free to mention it in the comment section.

I would be happy to help.

Also, you can explore our PrestaShop Development Services & a large range of quality PrestaShop Modules.

For any doubt contact us at [email protected].