DEV Community

Cover image for Web scraper in Nuxt 3 - part I - Introduction and setting up
Alois Sečkár
Alois Sečkár Subscriber

Posted on • Edited on

6 1 1

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:

Nuxt 3 terminal output

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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay