DEV Community: Kimon Topouzidis

Upgrading to nuxt 3

Kimon Topouzidis — Sat, 09 Mar 2024 19:12:31 +0000

Introduction

Oh boy. It's been a long time since the last time I published a blog post. So long that I had to do a whole migration to a new major version of Nuxt. Nuxt 3 is out for quite some time now and after working with the composition API for the past few years I really wanted to make the switch.

Couple of things before we get started. This is not a guide, but rather my journey and the problems I stumbled upon when migrating. If you are interested in a "how to" guide feel free to let me know and I'll do my best in creating one.

The process

I rubbed my hands and got to work. I had two options.

The first option was to start from scratch and re-build the whole thing. Honestly the codebase is not that big. I've got around 10 components such as the <AppHeader />, <AppFooter />, <BlogList /> etc. I could easily rebuilt the whole thing in a day and just replace the repo.
The second option was to migrate to Nuxt 3, slowly and carefully migrating to the new version. This approach, I figured, will also help me better understand the framework and how to use it.

I went with option number two. You see I had a plan. The good folks over at Nuxt got me covered. I used their guide to help me migrate from Nuxt 2. Ben Hong also did a live coding session upgrading his website.

I was actually watching this live, so you understand how long it took me to finally pull the trigger

While I was doing the update I thought I could also update couple of other things in my repo such as switching to pnpm instead of yarn although I am considering switching to bun just for fun (sorry, pun intended).

The whole process was smooth well kind of. After updating the nuxt.config.ts I started slowly upgrading the rest of the repo started from the top of the directory. I spare you the details but I'll try to list couple of things that I believe are worth mentioning.

Eslint

The very first thing I had to do was to remove babel and every other dependency that Nuxt 2 was using and wasn't really needed in the new version. I also removed eslint and that brings me to the first "issue". I am using prettier and eslint as my formatting and linting tools. It took me some time to get the desired results and after installing some packages I got it working. The Nuxt team recommends against using Prettier when working with the codebase but I like Prettier. Anthony Fu has an opinionated eslint-config but that didn't really work for me so I had to spend some time to make it work for me.

Nuxt content

I also use Nuxt Content for my blog and this was another migration I had to do. To be fair I prefer the new way of fetching your content using the composables better!

The gotcha here was really specific and it was related to dates. You see in my old nuxt blog I was using nuxt-content-git to add an updatedAt date on my markdown files. I had to move away from that though as it wasn't reliable enough for me. The nuxt content module also dropped support for createdAt so the solution I found for that was creating custom date Front-matter parameters. Yeah I have to update them manually but I can live with that for now.

As I was writing that I thought that I might be able to get away with it and use Obsidian to automatically enter the date whenever I make an edit on my markdown files. Nice!

Modules migration

I am also using couple of other modules on my site, such as @nuxt/image and @nuxt-svgo that I had to update and make sure that they work as intended. Apple almost made me cry when they announced dropping support for PWAs but they reversed it. In the meantime I already removed the PWA module that I have to eventually re add at some point!

Netlify

I am deploying my website directly in Netlify and since Nuxt 3 is now powered by nitro I had to make a small change on the deployment settings in Netlify. Not a biggie but I had some down time because of that 😅

Conclusion

Well that's pretty much it. I might update the article in the feature as I try to expand and update my website but overall it was an interesting experience that definitely feels like an upgrade! I really like the DX that Nuxt provides and I hope that this will inspire me to write blog posts like this more often.

Until the next time...

Creating tags for your Nuxt Blog with Nuxt/Content

Kimon Topouzidis — Sun, 10 Oct 2021 19:05:11 +0000

Intro

Quite recently I revamped my website using a newer version of Nuxt and decided to use Nuxt Content for my Blog. While creating the main blog and projects pages though, I came across a quite common issue, tags.

You see when you first land in the main Blog page you get a list of blog posts which can be overwhelming, especially since I haven't implemented pagination yet.

A quick alternative for me, was to create tags so you can filter out the results based on the topic you are interested in.

The how

In my current configuration I do have one main component for the Blog that is responsible to list all the blogs found in the content folder.

<!-- BlogList.vue -->
<template>
<!-- the list of blogs -->
  <ul class="...">
  <!-- the item/post wrapper -->
    <li
      v-for="blog of blogs"
      :key="blog.slug"
     ...
    >
      <NuxtLink :to="`/blog/${blog.slug}`">
        <img />
        <span class="sr-only">Link to the blog post</span>
      </NuxtLink>

      <div class="flex items-center px-4 pt-3 mb-2">
        ...
        <div class="flex items-center">
          <div v-for="(tag, idx) of blog.tags" :key="idx">
            <!-- The Tag component -->
            <UITag :tag="tag"></UITag>
          </div>
        </div>
      </div>
        ...
      </div>
    </li>
  </ul>
</template>

This component has a ul which holds the wrapper element of the blog post. Then I loop through the blog object and display the list items, aka blog post. Just after the date I am printing the tag which is another component. This tag component accepts a string as a prop named, well, tag and it's the slug of the tag. Lets take a look inside the component itself to see how this all works.

<!-- Tag.vue -->
<template>
  <NuxtLink class="..." :to="`/blog/tags/${tag}`">
    <IconTag class="text-kt-ice-white dark:text-text-kt-dark inline" />
    {{ tag }}
  </NuxtLink>
</template>

This component is a link, which will navigate the user into the special route /blog/tags/#tag. The last part is the actual prop we previously passed in the component.

For all this to make sense, I have created a new folder under the Blog folder/page that already existed, named Tags. Since this is a dynamic page (meaning that the slug is not a static string but will change every time) I have created a _slug.vue file on the Tags folder which will be responsible to display the blogs with the specific tag that I passed to it.

<!-- Tags -> _slug.vue -->
<section class="container mx-auto mt-10">
  <h1 class="text-2xl lg:text-4xl font-bold text-center">
    Posts tagged with
    <span class="text-kt-purple font-bold">#{{ slug }}</span>
  </h1>

  <div class="text-xl lg:text-2xl underline mt-4 text-center">
    <NuxtLink to="/blog"> All posts </NuxtLink>
  </div>

  <blog-list v-if="articles.length" :blogs="articles" />

  <div v-else class="my-6">
    <h2 class="text-xl lg:text-2xl text-center">
      Whoops... It seems that there are no articles with #{{ slug }} tag. 😥
    </h2>
  </div>
</section>

Here, using the same component that I use for the /blog route, the blog-list I am able to re-render the blog list but this time I am filtering all the blogs to get the ones that have the specific tag in their Front Matter.

// _slug.vue script
async asyncData({ $content, params }) {
// get the articles where the current tag is included in
// their tag front matter data and their status is published.
const articles = await $content('blog')
    .where({
    tags: { $contains: params.slug },
    status: 'published',
    })
    .fetch()

const slug = params.slug

return {
    articles,
    slug,
}
}

Using the content API I am able to filter the blog posts and get the posts that the current tag match their tag declaration in their Front Matter block and they are published!

NOTE: the published is another Front Matter option I added so I can freely create posts whenever I do have an idea or inspiration and I can still push the content in git without them being published, if they are unfinished.

And that's it! Now you can search for specific tags in my blog list and you can filter them for quick access!

The result:

You can find more information about the Nuxt Content module here!

Until the next time ✌

Contributing to Open Source

Kimon Topouzidis — Tue, 06 Oct 2020 10:40:28 +0000

October. Hactober. The month dedicated to tech and coffee (October 1st is the World Coffee Day)! In this month the most exciting things in the field of technology are announced and released. One of them, I am sure all of you know already, is Hactoberfest. With all that fuzziness of the first 5 days of October I remembered my very first contribution to Open Source and how things changed over the years.

Let me tell you a story...

...about my experience in Open Source which started back in the summer of 2017. I was first introduced to Google Summer of Code by a professor in University. Actually I remember reading in his e-mail Participate in Google Summer of Code for a salary of 6.000€ or something like that. I jumped over my chair and I instantly made the calculations ".... 6000 divided by 3 equals...." TADA!! (SPOILER: it turned out to be less than that because, Greece, you know).

I remember searching the internet trying to find information about the whole thing that Google sponsor students to work on Open Source projects. It must be a joke, I said and I searched on the organizations that was participating.

After about a week I applied. The only thing I was thinking of, was the money. Yeah don't judge me that's my truth. I was thinking all the purchases I would do with my first payslip. For Greece even if the amount wasn't 6k with all the taxes and stuff, it was still a great amount of money for a student.

I will never forget the day the results came out. NEVER. I was out with friends and I got an email.

WHAT A JOY!!! I couldn't believe in my eyes. I thought someone messed up with me. Oh boy I was accepted to Mono's cppSharp project!!! (literally to this day I find it pretty hard to explain to others what this library does. But this seemed to be so interesting to me back then.)

The Open Source adventure began...

...right away actually. We used Skype for internal communication because of Microsoft (Mono is a Xamarin project where Xamarin belongs to Microsoft) and my training began in early May. And what a summer that was indeed. I spent hours in my PC trying to understand and compile the project locally and also learn new things. I also met some of the contributors in that time. They weren't students. They were real people, with daytime jobs, that helped and supported an Open Source project in the evenings FOR FREE.

That was it. I realized it. I realized what open source is. Some crazy people with no lives that want to code all day long.
No. Of course not. A great community with great people that offer their knowledge for free in exchange for a better world. They are heroes. Remember, when I thought of this whole thing I got money in my mind. I wanted that money and I did what I did for the money. They did it for the community. They did it for free. They did it for you and me that use OSS every day thanks to those HEROES.

Through that summer I learnt what I haven't learnt in 3 years in University. I learnt how to use Git. How to write clean and documented code. How to interact with people from another part of this world. How to report a bug in a big OS library. How to dig into large scale projects and walk your way. How to create unit tests. The list could go on and on but the thing is you can't put a price tag on those. The value of those things can't be bought with money. There are so many maintainers right now and so many people willing to provide help, teach and work with young developers that are willing to contribute to Open Source. I get it, #GoodFirstIssue is not the ideal start but if you chat with those guys and girls if you spend two hours of your free time trying to understand what this project is about I am more than sure that someone will prompt you to a good first issue and give you all the help you might need.

..through the end of the summer

... i didn't even care about the money. All I wanted was to get up in the morning and work on that little thing that I couldn't solve. In 4 months I was a better developer and this was one of the most exciting things I did in my student years. Unfortunately I didn't find out about this earlier. This was my one and only participation on GSoC and I am grateful for all the things I learnt. This is a reminder for young readers and developers who are still students and want to elevate their careers. There are sources outside in the wilderness that will help you on the long run if you use them correctly. In my case I became a better developer and person. It could be just money and nothing more than that. But fortunately it wasn't. In your case that might be something entirely different but thats fine, everyone is different.

...in the end...

...Open source is not about money (at least for you and me. Funding an Open Source projects is another topic for someone more experienced than me) and its definitely not about a T-Shirt. Don't be like me and your motives are money (or a T-shirt in our days). See deeper in the value of Open Source and find your meaning when contributing. It's a great feeling having your code published on a OSS release. Maintainers out there, for me are Tech Heroes. They work hard to maintain a quality and bug free library/software/package. Respect them, they deserve it. Chat with them, they are friendly and eager to help because in the end your contribution helps them as well. They will guide you to the right direction and find a good First Issue. Changing the title of their project, that they might have put hours upon hours on, to magical and wonderful project is just disrespectfull.

If for any reason you are curious in learning more about my summer there, what I did and see my code, you can find my story here in the official Monos blog. Also you can find me in Twitter, or write a comment below 😀

Installing Vue Storefront in Windows via WSL2

Kimon Topouzidis — Fri, 20 Mar 2020 16:22:35 +0000

Introduction

If you are reading this, I am assuming you already know what Vue Storefront is, but for those who don’t let me explain.

Vue Storefront is an Open Source PWA for eCommerce. As its name suggest its based on Vue.js and it uses its own Node.js API or any other really, to fetch data from the backend of your desire. The most popular choice right now is Magento 2 but there are other options too and a lot more coming on the way. The community is super friendly and I really encourage you to join the Slack channel if you find this interesting!

Preparation

Okay let’s focus on the installation. You will need some stuff installed beforehand. Let’s
have a look:

~~Windows Insider - Slow or Fast track~~ As per this comment you can now skip this step! Matt also gives some great suggestion for your setup there!
Linux distro e.g Ubuntu-18.04
Docker for Windows

Let’s start enabling the WSL2 features on our Windows machine. In order to do so we have to make sure that we have a Windows 10 build of 18917 or higher. Press win + r and type winver to see your current version. If you have a build version greater that the required you are good to go. If not you’ll have to register for the Windows Insiders Program.

Before doing so please make sure you enable the additional required features for the WSL2 which are Windows Subsystem for Linux and Virtual Machine Platform. Both of these can be found if you search for Turn Windows features on and off. Now let’s try register for the Insiders program. Type Settings on the start menu and under Update & Security locate Windows Insider Program.

After you successfully enroll to the slow or fast track the first part is complete.

Moving on to the second part which is installing a Linux distro. Open Microsoft Store and search for “Linux”.

There some great options there but for the sake of this tutorial we will choose Ubuntu 18.04. Install the Linux version of your choice like you would do with a regular app. Moving on with docker, install docker and activate the WSL2 option as shown.

Next go to the Resources tab and choose the distro you installed on the previous step and enable the integration.

By now we have enrolled to the insiders program, installed docker with WSL2 features enabled, installed a linux distro and the last thing to do is actually enable WSL2.

In order to do so we have to run wsl --set-version <Distro> 2 to the command line. I installed the new Microsoft terminal but you can do that with pre-installed Powershell too.

Remember to change with the name of your distro. you can check the installed ones if you run wsl --list. More information can be found here.

To check your WSL version type wsl -l -v.

Now if you open your terminal and choose the Linux version you installed you should be good to go.

That’s it 🎉 🎊 . You have successfully installed WSL2 and have enabled its features on your default distro. You can also follow this video by Scott Hanselman which I found super useful.

From here you can just follow the default instruction found on the Vue Storefront docs. You are in a Linux OS now after all 🙂 (kinda)

Quick tip before I let you go.
I find that running this command echo "sync && echo 3 > /proc/sys/vm/drop_caches" | sudo sh fixes some issues with memory the Vmmem process is having. It can be really memory hungry!

Please let me know if there’s anything I can improve on this mini - guide. You can also find me on the VSF Slack channel.

Vue Storefront is really promising and the community is super friendly. It’s how open source should be. It’s a great place to be in if you are interested in finding more.

Good luck with your adventures 🍀