topic Re-visiting Vue.js in Alfresco Archive

topic Re-visiting Vue.js in Alfresco Archive https://connect.hyland.com/t5/alfresco-archive/re-visiting-vue-js/m-p/160630#M114594 <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>I've now experimented with creating the same simple Alfresco client in <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2016/12/21/getting-started-with-vuejs" rel="nofollow noopener noreferrer">Vue.js</A>, <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2017/01/10/vue-vs-react-initial-impressions" rel="nofollow noopener noreferrer">React</A>, <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2017/01/11/first-steps-with-aurelia" rel="nofollow noopener noreferrer">Aurelia</A> and <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2017/01/12/vanilla-angular-2-client" rel="nofollow noopener noreferrer">Angular</A>. When I created the first client in <A href="https://vuejs.org/" rel="nofollow noopener noreferrer">Vue.js</A> I built up the project from scratch rather than using the CLI in order that I could better understand Node.js, Express, webpack, etc. This resulted in me creating an <A href="https://www.npmjs.com/package/alfresco-auth-router" rel="nofollow noopener noreferrer">NPM package</A> to configure Node.js middleware to handle authentication against an Alfresco Repository. When using the various CLIs for the other frameworks I found that they all were aimed at creating a Single Page Application and I ended up creating proxy configuration to re-route REST API requests to Alfresco. As this approach is <A href="http://vuejs-templates.github.io/webpack/proxy.html" rel="nofollow noopener noreferrer">also available in Vue</A> I wanted to explore this option as I begin to move all the implementation forwards. Setting up the proxy was very simply a case of adding a "proxyTable" entry to the index.js file:<PRE class="language-javascript line-numbers"><CODE>proxyTable: {    '/proxy/alfresco': {       target: '<A class="jive-link-external-small" href="http://localhost:8080/alfresco" rel="nofollow noopener noreferrer" target="_blank">http://localhost:8080/alfresco</A>',       changeOrigin: true,       pathRewrite: {          '^/proxy/alfresco': ''       }    } },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>...but getting the touter configured was a little more tricky because changes between versions 1 and 2 of Vue.js meant that some of the blog posts are out of date. However, following the <A href="https://router.vuejs.org/en/" rel="nofollow noopener noreferrer">official documentation</A> ultimately proved most useful.  Defining the basic application routing structure was quite straightforward as well... with a main HTML page containing:<PRE class="line-numbers language-markup"><CODE><div id="app">    <router-view></router-view> </div>‍‍‍‍‍‍‍‍‍</CODE></PRE>...it was possible to setup up the main.js file to bind the a router with a Login and Home components as follows...<PRE class="language-javascript line-numbers"><CODE>const routes = [    {       path: '/',       redirect: '/home'    },    {       path: '/home',       component: Home,       beforeEnter: (to, from, next) => {          if (auth.loggedIn()) {             next();          } else {             next('/login');          }       }    },    { path: '/login', component: Login } ]; export const router = new VueRouter({    routes: routes }); new Vue({    router }).$mount('#app');‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>The "/home" route is protected with a "beforeEnter" guard that uses my "<A href="https://www.npmjs.com/package/alfresco-js-utils" rel="nofollow noopener noreferrer">alfresco-js-utils</A>" NPM package for ensuring that the current user is logged in.Having completed the authentication handling it was just a case of porting my previously created components to <A href="https://github.com/draperd/Alfresco-Vue-Client" rel="nofollow noopener noreferrer">the new project</A> (you can view the code at the time of writing by checking out <A href="https://github.com/draperd/Alfresco-Vue-Client/releases/tag/Blog1" rel="nofollow noopener noreferrer">this tag</A>).I was interested to see how I would feel about coming back to Vue.js having subsequently looked at React, Aurelia and Angular and in my opinion its the most satisfying to code in. There are still frustrating elements but the documentation and tooling is excellent and the CLI gives you an excellent starting point for development. </BODY></HTML> Thu, 12 Jan 2017 16:22:56 GMT ddraper 2017-01-12T16:22:56Z Re-visiting Vue.js https://connect.hyland.com/t5/alfresco-archive/re-visiting-vue-js/m-p/160630#M114594 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.I've now experimented with creating the same s Thu, 12 Jan 2017 16:22:56 GMT https://connect.hyland.com/t5/alfresco-archive/re-visiting-vue-js/m-p/160630#M114594 ddraper 2017-01-12T16:22:56Z