RE: Liferay Vue Module Project: Import of Single file templates is not work

H. Reineke, modified 6 Years ago. New Member Posts: 3 Join Date: 7/3/17 Recent Posts

I've created a module project  with npm-vue-module template. "Hello World" is running so far but always when I try to import a Single File Template (App.vue) an error occurs.

import Vue from 'vue/dist/vue.common';<br> import App from './App.vue'

export default function(elementId) {<br> &nbsp;&nbsp; &nbsp;new Vue({<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;el: `#${elementId}`,<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;data: {<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text: 'Hello World!',<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;},<br> &nbsp;&nbsp; &nbsp;});<br> }

ERROR [http-nio-8080-exec-7][status_jsp:927] Path [Vueport3@1.0.0/App.vue.js] does not start with a "/" character

 

It seems that vue file is taken as javascript file without any conversion.

In the browser its shown as loading failed: http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7100&t=1546459208026&Vueport3@1.0.0/App.vue.js

I am using LR 7.1 Bundle.

Any ideas?

thumbnail
Ivan Zaera, modified 6 Years ago. Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts

You are right. As stated here all modules inside the deployed JAR file must be JS code in AMD format, so you need to make sure that you translate your vue templates to JS code as it is done, for instance, with JSX templates in React projects.

I guess you can use babel for that, but I cannot be 100% sure because I haven't tested it.

H. Reineke, modified 6 Years ago. New Member Posts: 3 Join Date: 7/3/17 Recent Posts

I 've heard that there will be a new version of  liferay-npm-bundler for vue/react/etc. Will the conversion of *.vue files to javascript  be considered in the new version of  liferay-npm-bundler?

thumbnail
Ivan Zaera, modified 6 Years ago. Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts

Unfortunately, nope :-(. We definitely need to address vue templates some time in the future, but right now it is not at the top of the priority list.

 

However, if you want to investigate it and maybe contribute your specific solution, the support may arrive faster to the official tool :-).

 

I can help you with specific bundler issues if you have doubts though I haven't played with vue templates yet, so I don't know what needs to be done specifically.

 

Cheers,

Ivan

H. Reineke, modified 6 Years ago. New Member Posts: 3 Join Date: 7/3/17 Recent Posts
Thank you for the fast reply + help. We will think about that.