Vue & Nuxt web design for your frontend project

We build our websites and web applications sometimes Vue.js. Vue.js is a front-end web framework. Code-on has chosen to program websites and web applications primarily with Vue and Nuxt. This allows your website to do more than if it was created 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 the thing. When you enter a URL, a server gets the request for a page. Then with an MPA application or Web site, you're going to get all the HTML handed to you through the server which sends that HTML as one file to your browser. With SPA (single page application) things are different. Here we are no longer going to render the HTML on the server. No, when the you enter a URL in an SPA application, the browser is going to fetch 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, but now your browser does it using an API and JavaScript. 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 frontend part. That allows us to 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 are self-contained. Surely that makes maintenance and extensions easier in the long run.

The major frontend frameworks are currently React, Vue.js and Svelte, Angular. We have chosen VUE.js and its little brother 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 more difficult 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. Moreover, 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 a focus on SSR (Server Side Rendering). This is mainly important for website SEO. This is because Google is not very good at reading JavaScript interactions. Therefore, we need to render the first page you visit back the older way and give it to the browser in the traditional way. The moment the browser has then received that page, the frontend technology like with Vue starts to work. This along with a few other handy extras is Nuxt.js.

Does web development cost more with Vue.js?

Our experienced team has worked with Vue.js and Nuxt.js as well as HTMX and Alpine.js. Although we really like Vue.js + Nuxt, we have found that the development time required for projects with both a Django backend and a Vue.js frontend typically increases by 20% to 40%. This is mainly because we have to create and maintain the code in multiple places. Often at least 2 developers have to work on 1 project. In addition, we find that maintaining these applications is more work than normal MPA development.

However, using HTMX and Alpine.js, or even pure JavaScript, we can often achieve similar results. This made us realize that the choice of technology is indeed highly dependent on the complexity of the project. For some projects, the preference for Vue.js and Nuxt.js is obvious, but there are also many situations where HTMX can be an attractive alternative.

We have also found that choosing the right technology is not just a matter of development time and code maintenance. Other factors, such as application performance, user experience and, in particular, scalability, play a crucial role. In particular, scalability is an important consideration when choosing between client-side and server-side rendering technologies, as it affects the application's ability to grow and perform under increased load.

Therefore, with each project we must carefully weigh the pros and cons of each technology. Sometimes this means taking the extra time to implement Vue.js and Nuxt.js, while in other cases we prefer the simplicity and efficiency of HTMX and Alpine.js

So when you seek services from a web development company definitely take in the two possibilities into consideration. We can talk about this at length.

MPA strikes back!

Want to know what HTMX is?