Vue & Nuxt web design for your frontend project

We build our websites and web applications with Vue.js. Vue.js is a frontend web framework. Code-on has chosen to program websites and web applications mainly with Vue and Nuxt. Therefore your website can do more than when it is made in a more traditional way.

What is Frontend? What are Single Page Applications (SPA)?

Until not so long ago, we programmed MPA (multi page applications). The server was responsible for creating the HTML. This made pages quite static and difficult to get interactive. Here's how. When you enter a URL a server gets the request for a page. With an MPA website you are going to get all the HTML provided by the server which sends this HTML as one file to your browser. With SPA (single page application) it is different. Here we are no longer going to render the HTML on the server. No, when you enter a URL in an SPA application, the browser is going to load a whole bunch of JavaScript which in turn is going to read API. The browser now becomes responsible for creating the HTML via the JavaScript.

This sounds complicated. Fortunately, our tools help with this setup. In fact, we do this with a Frontend Framework VUE.JS and its little brother NUXT.JS.

What are the benefits of Single Page Applications?

The HTML is no longer static. Before, it was created by the server, now your browser is using an Javascript to connect to the API. This gives us as web developers much more freedom to make the application interactive. After all, a lot of the presentation logic is now in the front end. That means we can make your website or application a lot more interactive.

In addition to making it more interactive, this technology now allows us to make much more use of small web components that stand alone. Surely this makes maintenance and the creation of extensions easier in the long run.

The major frontend frameworks currently are React, Vue.js and Svelte, Angular. We have chosen VUE.js and its sibling Nuxt.js.

Why Vue and Nuxt?

Although React and Angular were earlier, Vue has some advantages for us. It's like React and Angular made a baby called Vue :-). Vue is fast and very popular among developers. Where React has a much harder learning curve, it also lacks a standard set of components. Vue on the other hand is a complete framework that is very easy to learn for the frontend web developer. And easy to learn means, it is also easier to maintain. On top of that, Vue is also the fastest framework. It has adopted all the good aspects of its predecessors.

What is nuxt.js? (Server side rendering)

Nuxt.js is Vue with extras, which include focusing on SSR (Server Side Rendering). This is mainly important for the SEO of the website. This is because Google is not very good at reading JavaScript interactions. Therefore we need to render the first page you visit back in the older way and give it to the browser in the traditional way. The moment the browser then received that page, the frontend technology starts working as with Vue. This along with a few other useful extras is Nuxt.js.

Does web development cost more with Vue.js?

Yes and no. Developing with Vue is a different approach than with traditional websites and web applications. The cost actually depends very much on what you are going to do with it. If you do it as static as MPA websites, then obviously it doesn't have to cost more. However, the temptation is there to build much more. All those interactions on a page obviously cost programmers hours. It also means that more can go wrong and more testing needs to be done. But if you keep it as simple as the old MPA techniques, developing doesn't have to cost more. With the advantage that your application will be much faster and ready for the future...!