{"id":457058,"date":"2024-08-08T13:52:00","date_gmt":"2024-08-08T13:52:00","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=457058"},"modified":"2024-08-08T13:52:03","modified_gmt":"2024-08-08T13:52:03","slug":"how-to-configure-vue-js-in-prestashop-module","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/","title":{"rendered":"How to configure Vue.js in PrestaShop module"},"content":{"rendered":"\n<p>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 <a href=\"https:\/\/devdocs.prestashop-project.org\/8\/modules\/concepts\/templating\/vuejs\" target=\"_blank\" rel=\"noreferrer noopener\">configuring the Vue.js in the PrestaShop module<\/a>. <\/p>\n\n\n\n<p>We will follow the same steps to configure Vue.js in our sample module.<\/p>\n\n\n\n<p><strong>Note: You must have <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noreferrer noopener\">nodejs<\/a> installed on your system to execute and install packages.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1- Install Vue.js CLI tool<\/h3>\n\n\n\n<p>To install this tool, you have to run the below command in the terminal:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm install -g @vue\/cli<\/pre>\n\n\n\n<p>After running this command, you can check the version of Vue.js CLI tool to using the below command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">vue --version<\/pre>\n\n\n\n<p>If you got the version, that means you have succefully installed the Vue.js CLI tool.<\/p>\n\n\n\n<p>For the demo puposes, we have created a simple &#8220;wkvue&#8221; module with required minimum code to install in the PrestaShop:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">class Wkvue extends Module\n{\n    public function __construct()\n    {\n        $this-&gt;name = &#039;wkvue&#039;;\n        $this-&gt;tab = &#039;front_office_features&#039;;\n        $this-&gt;version = &#039;1.0.0&#039;;\n        $this-&gt;author = &#039;Webkul&#039;;\n        $this-&gt;need_instance = 0;\n        $this-&gt;bootstrap = true;\n\n        parent::__construct();\n\n        $this-&gt;displayName = $this-&gt;l(&#039;VueJS Module&#039;);\n        $this-&gt;description = $this-&gt;l(&#039;This module is used for VueJs&#039;);\n\n        $this-&gt;confirmUninstall = $this-&gt;l(&#039;Are you sure you want to uninstall my module?&#039;);\n\n        $this-&gt;ps_versions_compliancy = &#091;&#039;min&#039; =&gt; &#039;1.7&#039;, &#039;max&#039; =&gt; _PS_VERSION_];\n    }\n}<\/pre>\n\n\n\n<p>After installation of this module, we will create a new Vue project using the below command under the &#8220;wkvue&#8221; module directory:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">vue create dev<\/pre>\n\n\n\n<p>During this project creation, you will be asked for the Vue version. We have selected the preset with Vue 2 &amp; Babel for this blog.<\/p>\n\n\n\n<p>After creation of the project, enter to the project directory and execute the build command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm run build<\/pre>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2- Cleanup<\/h3>\n\n\n\n<p>First of all, we have to remove the &#8220;dev\/public&#8221; folder and &#8220;serve&#8221; command from the &#8220;package.json&#8221; file available in the &#8220;dev&#8221; folder.<\/p>\n\n\n\n<p>Now, we need to create &#8220;views\/js\/&#8221; folder under the &#8220;wkvue&#8221; folder to store the JavaScript files. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3- Configure Vue project for a PrestaShop context<\/h3>\n\n\n\n<p>We will edit the &#8220;vue.config.js&#8221; file available in the &#8220;dev\/&#8221; folder and replace with the below code snippets:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">const path = require(&#039;path&#039;);\n\nmodule.exports = {\n  chainWebpack: (config) =&gt; {\n    \/\/ Stop generating the HTML page\n    config.plugins.delete(&#039;html&#039;);\n    config.plugins.delete(&#039;preload&#039;);\n    config.plugins.delete(&#039;prefetch&#039;);\n\n    \/\/ Allow resolving images in the subfolder src\/assets\/\n    config.resolve.alias.set(&#039;@&#039;, path.resolve(__dirname, &#039;src&#039;));\n  },\n  css: {\n    extract: false,\n  },\n  runtimeCompiler: true,\n  productionSourceMap: false,\n  filenameHashing: false,\n  \/\/ These rules allow the files to be compiled and stored in the proper folder\n  outputDir: &#039;..\/views\/&#039;,\n  assetsDir: &#039;&#039;,\n  publicPath: &#039;..\/modules\/wkvue\/views\/&#039;,\n};<\/pre>\n\n\n\n<p>After this, we need to replace the package.json scripts with below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&quot;build&quot;: &quot;vue-cli-service build --no-clean&quot;,\n&quot;lint&quot;: &quot;vue-cli-service lint --fix&quot;,\n&quot;dev&quot;: &quot;vue-cli-service build --no-clean --mode development --watch&quot;<\/pre>\n\n\n\n<p>As you can see &#8220;&#8211;watch&#8221; flag in the &#8220;dev&#8221; 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.<\/p>\n\n\n\n<p>Run the below command to generated the complied assets:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm run dev<\/pre>\n\n\n\n<p>After running this command, two new compiled JavaScript files are generated in the &#8220;view\/js&#8221; folder:<\/p>\n\n\n\n<p>wkvue\/views\/js\/chunk-vendors.js<br>wkvue\/views\/js\/app.js<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4- Add generated JavaScript files in PrestaShop<\/h3>\n\n\n\n<p>Now, we will add these generated JavaScript files in our PrestaShop module. For the demo purposes, we have created &#8220;getContent()&#8221; method in the main module file and added these scripts:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">public function getContent()\n{\n    $this-&gt;context-&gt;smarty-&gt;assign(&#091;\n        &#039;pathApp&#039; =&gt; $this-&gt;getPathUri() . &#039;views\/js\/app.js&#039;,\n        &#039;chunkVendor&#039; =&gt; $this-&gt;getPathUri() . &#039;views\/js\/chunk-vendors.js&#039;,\n    ]);\n\n    return $this-&gt;context-&gt;smarty-&gt;fetch(&#039;module:wkvue\/views\/templates\/admin\/configure.tpl&#039;);\n}<\/pre>\n\n\n\n<p>Create a new folder &#8220;views\/templates\/admin\/&#8221; and create a &#8220;configure.tpl&#8221; file under this and add the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;link href=&quot;{$pathApp|escape:&#039;htmlall&#039;:&#039;UTF-8&#039;}&quot; rel=preload as=script&gt;\n&lt;div id=&quot;app&quot;&gt;&lt;\/div&gt;\n&lt;script src=&quot;{$chunkVendor|escape:&#039;htmlall&#039;:&#039;UTF-8&#039;}&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;{$pathApp|escape:&#039;htmlall&#039;:&#039;UTF-8&#039;}&quot;&gt;&lt;\/script&gt;<\/pre>\n\n\n\n<p>Now, let&#8217;s replace the &#8220;wkvue\/dev\/src\/components\/HelloWorld.vue&#8221; file code with below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;template&gt;\n    &lt;div class=&quot;hello-vue&quot;&gt;\n        &lt;div class=&quot;col-md-6 col-md-offset-3&quot;&gt;\n            &lt;h1&gt;{{ name }}&lt;\/h1&gt;\n            &lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;name&quot; \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n    export default {\n        name: &#039;HelloWorld&#039;,\n        data() {\n            return {\n                name: &#039;Hello Vue!&#039;\n            }\n        }\n    }\n&lt;\/script&gt;<\/pre>\n\n\n\n<p>Now, if you go to the module configuration page, you will see the below screen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"606\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-1200x606.gif\" alt=\"prestashp-vuejs\" class=\"wp-image-457122\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-1200x606.gif 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-300x152.gif 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-250x126.gif 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-768x388.gif 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>That\u2019s all about this blog.<\/p>\n\n\n\n<p>If any issue or doubt please feel free to mention it in the comment section.<\/p>\n\n\n\n<p>I would be happy to help.<\/p>\n\n\n\n<p>Also, you can explore our&nbsp;<a href=\"https:\/\/webkul.com\/prestashop-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">PrestaShop Development Services<\/a>&nbsp;&amp; a large range of quality&nbsp;<a href=\"https:\/\/store.webkul.com\/PrestaShop-Extensions.html\" target=\"_blank\" rel=\"noreferrer noopener\">PrestaShop Modules<\/a>.<\/p>\n\n\n\n<p>For any doubt contact us at&nbsp;<a href=\"mailto:support@webkul.com\">support@webkul.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 <a href=\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":384,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[209],"tags":[2065,7936,7939],"class_list":["post-457058","post","type-post","status-publish","format-standard","hentry","category-prestashop","tag-prestashop","tag-vue-js","tag-vue-js-in-prestashop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to configure Vue.js in PrestaShop module - Webkul Blog<\/title>\n<meta name=\"description\" content=\"In this blog, we have learn about configure the Vue.js project with PrestaShop module using the help of a sample module.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to configure Vue.js in PrestaShop module - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog, we have learn about configure the Vue.js project with PrestaShop module using the help of a sample module.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-08T13:52:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-08T13:52:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-1200x606.gif\" \/>\n<meta name=\"author\" content=\"Ajeet Chauhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ajeet Chauhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/\"},\"author\":{\"name\":\"Ajeet Chauhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/7eee8f48857441660231d6a643103357\"},\"headline\":\"How to configure Vue.js in PrestaShop module\",\"datePublished\":\"2024-08-08T13:52:00+00:00\",\"dateModified\":\"2024-08-08T13:52:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/\"},\"wordCount\":577,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-1200x606.gif\",\"keywords\":[\"prestashop\",\"vue.js\",\"vue.js in prestashop\"],\"articleSection\":[\"prestashop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/\",\"name\":\"How to configure Vue.js in PrestaShop module - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-1200x606.gif\",\"datePublished\":\"2024-08-08T13:52:00+00:00\",\"dateModified\":\"2024-08-08T13:52:03+00:00\",\"description\":\"In this blog, we have learn about configure the Vue.js project with PrestaShop module using the help of a sample module.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs.gif\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs.gif\",\"width\":1294,\"height\":654,\"caption\":\"prestashp-vuejs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to configure Vue.js in PrestaShop module\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/7eee8f48857441660231d6a643103357\",\"name\":\"Ajeet Chauhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e97b5fe8122a2283f5fe35ae6fca4725ac46026413ce7959b575f842f6bd6c92?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e97b5fe8122a2283f5fe35ae6fca4725ac46026413ce7959b575f842f6bd6c92?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Ajeet Chauhan\"},\"description\":\"Ajeet is a talented Software Engineer specializing in the PrestaShop platform. With expertise in PrestaShop Shipping &amp; Payments Integration, Marketplace Development, and Headless services, he delivers innovative solutions that enhance eCommerce functionality, driving seamless operations for businesses and their customers.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/ajeetchauhan-symfony143\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to configure Vue.js in PrestaShop module - Webkul Blog","description":"In this blog, we have learn about configure the Vue.js project with PrestaShop module using the help of a sample module.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/","og_locale":"en_US","og_type":"article","og_title":"How to configure Vue.js in PrestaShop module - Webkul Blog","og_description":"In this blog, we have learn about configure the Vue.js project with PrestaShop module using the help of a sample module.","og_url":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-08-08T13:52:00+00:00","article_modified_time":"2024-08-08T13:52:03+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-1200x606.gif","type":"","width":"","height":""}],"author":"Ajeet Chauhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ajeet Chauhan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/"},"author":{"name":"Ajeet Chauhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/7eee8f48857441660231d6a643103357"},"headline":"How to configure Vue.js in PrestaShop module","datePublished":"2024-08-08T13:52:00+00:00","dateModified":"2024-08-08T13:52:03+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/"},"wordCount":577,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-1200x606.gif","keywords":["prestashop","vue.js","vue.js in prestashop"],"articleSection":["prestashop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/","url":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/","name":"How to configure Vue.js in PrestaShop module - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs-1200x606.gif","datePublished":"2024-08-08T13:52:00+00:00","dateModified":"2024-08-08T13:52:03+00:00","description":"In this blog, we have learn about configure the Vue.js project with PrestaShop module using the help of a sample module.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs.gif","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/08\/prestashp-vuejs.gif","width":1294,"height":654,"caption":"prestashp-vuejs"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-configure-vue-js-in-prestashop-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to configure Vue.js in PrestaShop module"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/7eee8f48857441660231d6a643103357","name":"Ajeet Chauhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e97b5fe8122a2283f5fe35ae6fca4725ac46026413ce7959b575f842f6bd6c92?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e97b5fe8122a2283f5fe35ae6fca4725ac46026413ce7959b575f842f6bd6c92?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Ajeet Chauhan"},"description":"Ajeet is a talented Software Engineer specializing in the PrestaShop platform. With expertise in PrestaShop Shipping &amp; Payments Integration, Marketplace Development, and Headless services, he delivers innovative solutions that enhance eCommerce functionality, driving seamless operations for businesses and their customers.","url":"https:\/\/webkul.com\/blog\/author\/ajeetchauhan-symfony143\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/457058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/384"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=457058"}],"version-history":[{"count":19,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/457058\/revisions"}],"predecessor-version":[{"id":457132,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/457058\/revisions\/457132"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=457058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=457058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=457058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}