topic Re-usable Vue.js Components with vue-loader in Alfresco Archive

topic Re-usable Vue.js Components with vue-loader in Alfresco Archive https://connect.hyland.com/t5/alfresco-archive/re-usable-vue-js-components-with-vue-loader/m-p/159965#M113985 <HTML><HEAD></HEAD><BODY><PRE __default_attr="info" __jive_macro_name="alert" alert="info" class="jive_text_macro jive_macro_alert">This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.</PRE>At the end of my <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2016/12/22/content-distribution-with-slots-in-vuejs" rel="nofollow noopener noreferrer">last post</A> I had decided to move away from a "Content Distribution" approach for my new <A href="https://vuejs.org/" rel="nofollow noopener noreferrer">Vue.js</A> Alfresco client and move towards a <A href="https://vuejs.org/v2/guide/single-file-components.html" rel="nofollow noopener noreferrer">single file component</A> approach. You can view the state of <A href="https://github.com/draperd/AlfrescoNodeJS" rel="nofollow noopener noreferrer">my project</A> at the time of writing by checking out this <A href="https://github.com/draperd/AlfrescoNodeJS/releases/tag/Blog5" rel="nofollow noopener noreferrer">tag</A>.My original thought was that I would just move my components from the main app.js file into 3 separate files and use ES6 importing and exporting (as now handled by <A href="https://webpack.js.org/" rel="nofollow noopener noreferrer">webpack</A> / <A href="https://babeljs.io/" rel="nofollow noopener noreferrer">babel</A>). However as I read through the documentation and various blog posts (including <A href="https://auth0.com/blog/create-an-app-in-vuejs-2/" rel="nofollow noopener noreferrer">the one</A> I originally started from) I realised that the recommended approach was to use <A href="https://github.com/vuejs/vue-loader" rel="nofollow noopener noreferrer">vue-loader</A> either via <A href="https://github.com/vuejs/vueify" rel="nofollow noopener noreferrer">vueify</A> or the <A href="https://github.com/vuejs/vue-cli" rel="nofollow noopener noreferrer">Vue.js CLI</A>.This presented a minor problem in that I already had an established project and didn't want to just start over. Fortunately there are various <A href="https://github.com/vuejs-templates/webpack-simple" rel="nofollow noopener noreferrer">templates</A> for different build approaches (such webpack as I was using) and it was a relatively simple exercise to install the missing packages defined in the template <A href="https://github.com/vuejs-templates/webpack-simple/blob/master/template/package.json" rel="nofollow noopener noreferrer">package.json</A> with <A href="https://yarnpkg.com/" rel="nofollow noopener noreferrer">yarn</A> and copy across the additional config into my webpack.config.js file.The vue-loader module allows you to write your Vue.js components in files with a .vue extension that are essentially an HTML file containing the following 3 elements:<PRE class="line-numbers language-markup"><CODE><style></style> <template></template> <script></script>‍‍‍</CODE></PRE>In order to better edit these files I installed a new <A href="https://github.com/vuejs/vue-syntax-highlight" rel="nofollow noopener noreferrer">syntax highlighting package</A> for <A href="https://www.sublimetext.com/" rel="nofollow noopener noreferrer">Sublime Text</A> (which is my editor of choice).I was now able to create a .vue file for each of the 3 components. As an example the smallest is currently ListView.vue:<PRE class="line-numbers language-markup"><CODE><style></style> <template>    <ul>       <li v-for="item in list.entries">{{item.entry.name}}</li>    </ul> </template> <script>    export default {       props: ['list']    } </script>‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>A couple of things that I noticed were that the file name needs to match how I use it as a custom element. I discovered that is is necessary to define your component names in JavaScript  in camel-case (i.e. "ListView") but that you can refer to them in the template as lisp-case (also sometimes referred to as "kebab-case" or "spinal-case") (i.e. "List-View").As predicted I was able to get rid of my global bus (that I had to use with the content distribution approach) so the volume of code actually reduced.The main disadvantage that I can see is that my outer component (List) now directly declares it's sub-components as both dependencies and in it's template:<PRE class="line-numbers language-markup"><CODE><template>    <div>       <Toolbar :list="list" @pageForward="pageForward" @pageBack="pageBack"></Toolbar>       <List-View :list="list"></List-View>    </div> </template>‍‍‍‍‍‍</CODE></PRE>However, Vue.js does provide a way in which components can be extended (through what they call <A href="https://vuejs.org/v2/guide/mixins.html" rel="nofollow noopener noreferrer">mixins</A>) which should make it possible to extend List and update the template to use a different view component for example.</BODY></HTML> Thu, 22 Dec 2016 08:51:14 GMT ddraper 2016-12-22T08:51:14Z Re-usable Vue.js Components with vue-loader https://connect.hyland.com/t5/alfresco-archive/re-usable-vue-js-components-with-vue-loader/m-p/159965#M113985 This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.At the end of my last post I had decided to mo Thu, 22 Dec 2016 08:51:14 GMT https://connect.hyland.com/t5/alfresco-archive/re-usable-vue-js-components-with-vue-loader/m-p/159965#M113985 ddraper 2016-12-22T08:51:14Z