JP-nuxt

My nuxt personal website

Content

What?

This project is the site you are currently reading this article from. Not just the back- or the frontend, but both combined. This site is built with Nuxt.js, which is a Vue framework, that enables server-side rendering and gives much other neat utility.

Why?

The problem

My previous site was also built with Vue, but with client-side rendering and worse styling.

The main problem that bothered me was that the site needed way too long to load, and if you clicked on a post, it would take an entire second to load the actual article. While waiting for the content for loading, you would sit in front of a blank article screen, with nothing indicating that anything is happening.

Another problem was that there was no real data management. By this, I mean that on the front page every single article was already loaded with every single bit of its information. But when you entered a certain article, the entire block of data was fetched again.

Now I could start talking about the styling, the backend or the upload page, but I think I made my point clear. I saw flaws all over the site.

The solution

When I discovered Nuxt.js I thought that this would be exactly what I needed. And that is still my opinion.

Compared to my old site, the new site is loading blazingly fast and the user has to fetch way less data, because now that the backend and the frontend can communicate better with each other, the data is able to be fetched and handled smartly.

When it comes to styling, I started using Tailwind CSS and tried to think more about the design, which seems to have worked out, because I see fewer flaws with the design on this site.

Choice of the name

Previously I have always named my main-site "JP". But when I realised that I rewrite the entire page every now and then, I thought I might name it individually so I don't have to overwrite the repository as I did with JP-old. I named this project "JP-nuxt" because I think that this will be the only version of my site that is built with Nuxt.js. Not because I don't like Nuxt.js, but because with my website, I always test out new technology. So my next project will maybe be made using Next.js, Svelte Kit or I might go back to the roots and generate simple static sites like evilcookie.de.

The problems I encountered

When setting up my project, I decided to use Nuxt 3, which may not have been the wisest decision, because it is so new and unstable that nearly none of the plugins for Nuxt.js works. So I had to make most of the basic stuff on my own.

What annoyed me, was that I wasn't able to use express.js in the backend, and I had to handle requests via the default http module in node.js, which isn't as nice to use as express.js. So to abstract things a bit, I started building a little router, that at least makes me feel like I was using express.js. The router looked basically like this:

class Router {
    // Every request type has its own map of routes pointing to handlers
    handlers = new Map([
        ["GET", new Map()],
        ["POST", new Map()]
    ])

    get(route, handler) {
        // Get the `GET` handler map and set the route to the new handler
        this.handlers.get("GET").set(route, handler)
    }
}

With the router I was able to create new routes like this:

const app = new Router()
app.get("/my-route", (request, response) => {
     // do something...
    response.end("Ok")
});
// GET /my-route => Ok

So with this set-up, building the backend was more fun than I expected it to be. Of course, the real router is more complex than this, so if you want to read the source code you can look at it on GitHub.

Technical specifications

... and many more. To see all the tech I used, go to the GitHub repo.

preview image