Nuxt Recipes

Table of Contents

• Introduction
• Activities
• Challenges & Solutions
  • Root Folder for Source Files
  • Local Fonts
• Lessons Learnt
• Conclusion

Introduction

A site listing recipes and instructions

• Went Live: 11 November 2024
• Problem statement: Learnt about Nuxt and the Nuxt ecosystem
• Goal: Build a site that pulls data from an external source and displays it.

Activities

• Initialising the appliction
• Adding necessary nuxt modules (tailwind, nuxt image, nuxt icon)
• Fetching the data
  • Exploring the fetch method and when to use which
• Extracting code snippets to components for better readability

Challenges & Solutions

• a root folder to hold source files
• using custom local fonts

Root Folder for Source Files

By default Nuxt3 places all files on the surface of the project - I am not a fan of that. I prefer to have a src folder to hold those files. Upon further investigation, I learnt a change had to be made in my nuxt.config file

Local Fonts

In most instances, I host the custom font with the project (usually in the public folder) with an accompanying css file. However when I was going through the docs, it mentioned the use of an assets folder for things like css files and a modification in nuxt.config. I tried that; putting the font files in assets as well, but that didn’t work how I had assumed.

I then later learnt that I could still keep to the setup I was familiar with with; font files in the public folder

Lessons Learnt

• Just about everything in Nuxt is configurable.
• To some extent I like prefer having the code related to a page (fetching, markup) on the same page.
• Extracting code into components and pass data to them
• Data binding and how that streamlines code

Conclusion

Even though I had initially written off Nuxt, changes in SvelteKit pushed me to give it another chance and pay closer attention to what I neede to do. That decision - to slow down - has made my journey into Nuxt enjoyable. Much like my Laravel Journey.