Web scraper in Nuxt 3 - part I - Introduction and setting up

Hi, fellow devs, and welcome to my first ever Nuxt 3 tutorial. I originally intended to write this in just one piece, but as the article quickly gained length, I rather decided to split it into 4 smaller parts:

1. Introduction and setting up
2. Backend scraping service in Nuxt
3. Displaying the results on frontend
4. Going live on Netlify

In this first part, I am going to introduce the task and the technology. If you'll follow along, you will end up with new Nuxt 3 application up and running on your machine before moving further.

What will we do?

Providing you like Java like I do, and you want to keep up with the latest development in the Java world like I do, did you ever wonder about the latest features coming into Java? There is a perfect page called JEP Index that sums up all the Java Enhancement Proposals, that is all the new things that appeared, are about to appear or never made it in JDK versions since Java 8. A lot can be written about JEPs, the whole concept of Java versioning or even about what the “OpenJDK” is, how it is different from Oracle Java and how many Javas are there.

But I don’t want to talk about this right now, we will stick with the JEP Index itself. The task is to answer the following question: What is the number of the latest JEP available? Why? Because when we notice the number is higher than we remember from the last time we checked, we can tell for sure there is something new. And as a Java enthusiasts we want to learn more about it, don’t we?

So of course, we could just open the JEP Index in our browser and check manually. But we’ll have to scroll down through all the 463 (as of November 12th, 2023) existing JEPs first and we are naturally lazy programmers, so let’s automate this tedious task and write a web scraper to do this for us.

Why Nuxt 3?

Alright, as you may have already heard, Nuxt 3 is a Vue.js-based framework for creating amazing websites. So why would I pick it for this typically backend task? Well for a good two years Nuxt is my favorite tool to build web projects and yea, watch out, we might have a little law of the instrument over there, but I believe it is quite suitable for it as well.

Furthermore, during this excercise I can show you a whole bunch of things and concepts of this framework. Namely:

• It is super easy to setup a working Nuxt 3 application.
• Nuxt can naturally act as a backend server with little to no effort.
• Both backend and frontend can live together and talk to each other in one code base.
• Deploying Nuxt for production is a walk in the park using services like Netlify.

If you find any of those points interesting enough to keep reading, we’re just about to start. Just quickly go through the checklist of prerequisites:

• You should be somewhat familiar with JavaScript development.
• That implies you have some local JS runtime, probably Node.js (I am not familiar with things like Deno or Bun, so I can’t guarantee things would work there).
• It is good to have an IDE, while I believe VS Code is the best possible option for JavaScript projects. But if you would rather use something else, be my guest.
• For the final deployment part, you should use Git along with some online repository provider (I side with GitHub, but Netlify also seems to support GitHub, Bitbucket and Azure DevOps out of the box).

Setting up

Starting a new project with Nuxt is very simple. In fact, technically all you need are just two files. However, for the begining you should rather follow the Nuxt official recommendations. Or, if you like to, you may also use my own Nuxt Starter project which is already prepared and a bit enhanced with eslint, which I find invaluable in terms of code maintenance. To start benefiting from eslint’s static code analysis, you need to install an extension into VS Code.

Btw. I am fan of TypeScript, so while it is not strictly necessary to use TS in Nuxt, I’ll be using it from now on. I believe it is totally worth investing a little effort to overcome possible initial confusion, get familiar with its key concepts and start benefiting from increased type safety. You can still change every .ts suffix for .js and just ignore all the green type-related stuff in source code examples.

Once you go through the npm install + npm run dev combo and you see the welcome page at localhost:3000 in the browser, we are ready to go.

Nuxt is powered by an internal server called Nitro. You can see its manifestation in the terminal console right after you start your local dev server:

Among other things it allows hot module reloading (HMR) for smooth and blazing fast updates during development. You just save your file, and the changes are nearly instantly loaded and visible in your browser. You may not be amused by that, but in my job I have to deal with legacy Java project, where it may take minutes to see your changes in action. It is like a quantum leap forward.

Unless you deliberately select to generate static output, which is also possible to support fully static webhosting (check “SSG” for more info about that), Nitro is always there with your Nuxt 3 application, running in backend and ensuring everything runs smoothly. One of its tasks is to process and render <template> section of the app.vue file, which is the entry point to our starter app. It is served when you visit localhost:3000 (or localhost:3000/index). A lot can be said now about automatic routing in Nuxt, which I consider one of its biggest advantages, but we need to focus on the topic.

Conclusion

We are done with the preparations and we should have a working instance of Nuxt 3 up and running. Reach me in the comments if you encountered any problems during this phase or if you want me to explain some things in greater detail.

We will go back to the app.vue file in the 3rd part of the tutorial to tie the strings together, but let’s start with the actual web scraping service in the upcomming Part II - Backend scraping service in Nuxt.