Many regular readers of my blog will no doubt be aware of my Geekiam side project I kicked off a couple of years ago with my then 8 year old daughter. Where she wanted to get into development and running her own gaming geek blog. We had a lot of fun, fiddling around with various Javascript and Vue.Js frameworks most notably Gridsome and Nuxt.js.
As you might expect, my daughter has since moved onto other projects and other wild ideas, and the Geekiam side project kind of died and left rotting on the vine of the internet. Surprisingly the site still attracts a modicum of traffic, and there are a few articles that still gain quite a bit of interest.
Lately, I've been sitting around thinking about what technology I can have a little fiddle about with and learn new things. I've been dabbling in all things Bitcoin, Blockchain, Web3 etc, mostly things outside of my core day to day business software development. Fiddling about with various things and digger deeper into other concepts. I didn't really want to write articles about these aspects on this blog, primarily because I came to a decision about year ago, to try and keep the content on this blog specifically about Dotnet and Javascript related subjects.
I have tried a little Crypto sub section on this blog, but it never really took off with myself and for the most part the audience, and I didn't really want to push it down their throats. Not everybody is into Bitcoin as much as I am and I didn't want to come across as one of those toxic Bitcoin Maxi's and also probably most of my dabbling in this space could probably come across as some really bad financial advice.
I need a new platform, to pursue these side project interests, so at the same time I need to build it. I thought my Geekiam.io could be the perfect channel for that, with some rework. For any web project to be successful, the are some very basic elements it needs the first ingredient, traffic, which geekiam already generates, then there is an aged domain, which geekiam.io now has about 3 or so years, then some links.
SEO For Dummies
Up relevance scores, improve page speed, optimize voice search questions, and more!
shows website owners, developers, and search engine optimizers (SEOs) how to create a website that ranks at the top of search engines and has high-volume traffic, while answering the essential question of "how do I get people to visit my site?"
The current implementation of geekiam.io already has that, the second thing is that it needs a great platform, the current geekiam.io doesn't have that! It has a lot of experimentation and hap hazard implementations and things. I really want to fix that.
This is where I stumbled across Nuxt3 and Vue3, and this could be an ideal time to learn about those. In going through this process there were also a number of new tools, concepts and frameworks I wanted to become more familiar with.
Prerequisites
To follow along with this tutorial you will need the following already installed:
- NodeJS - to install Node just on your machine I recommend doing so with Node Version Manager -
How to Install Node Version Manager on Ubuntu Linux
What is Nuxt 3
Fundamentally Nuxt 3 is a complete rewrite of the Nuxt.JS framework, with a number of differences from its predecessor. Nuxt 3 has become so much more than just a Static Site Generator (SSG) than it's predecessor was, it now aids developers to implement full-featured client/server apps and provides the ability to decide on the rendering strategy for each page.
The most notable differences between Nuxt 3 and the first versions of Nuxt are:
Complete Typescript rewrite
The most notable difference is that Nuxt 3 has been completely rewritten in Typescript, which will undoubtedly provide improved maintenance and Typescript support going forward.
The static type system will help to prevent many potential runtime errors as your applications grow over time. Typescript continues to gain popularity and more systems, projects and frameworks are adopting it.
It is possible to continue to develop using Nuxt 3 using plain Javascript, but I won't be doing this and will be making use of Typescript.
Vue 3
Vue 3 was released in October 2020 and has since garnered a lot of praise from the Vue community. With Nuxt 3 being written in Vue 3, you get access to features like the Composition API, better module imports, and overall improved app performance.
Vue 3 is faster, smaller in file size, and equipped with improved TypeScript support. Vue 3 also come a raft of some new cool features:
- Composition API
- Improved Reactivity
- Portals
- Suspense
I won't elaborate on more on these features in this post, but we dig deeper into them as we progress through this series of articles and particular how we can make use of these features using Nuxt 3.
Improved Developer experience
Nuxt CLI
The Nuxt CLI (known as nuxi) helps you scaffold entirely new projects with zero effort. The CLI now comes with a new modules interface built-in, and it helps you run commands faster and more efficiently.
A nuxi was introduced to provide a no dependency experience for easily scaffolding your Nuxt projects.
Nuxt Suspense
Suspense is a special component that renders fallback content instead of your component until a condition is met. This condition is usually async operations happening in your components. This is implemented making use of the Vue3 Suspense
New Server Engine
The new Nuxt 3 server engine called Nuxt Nitro is a platform-independent and lightweight server that has no Nuxt runtime dependencies. It unlocks new full-stack capabilities for Nuxt by allowing you to create API routes like you would create pages directly in your Nuxt app.
This feature enables Full-stack capabilities with Nuxt enabling the creation of API routes, middleware and routing features.
This makes Nuxt applications lighter and faster and is the first JavaScript application server that is portable across a variety of modern cloud-hosting providers such as Netlify, Vercel, Cloudflare, etc.
How to start a new project with Nuxt 3
Thats enough talking about Nuxt and how cool it is. Lets start getting busy with this framework to explore more and get familiar with it.
To start a new project we can make use of the Nuxi CLI via the npx
What is npx ?
Node Package Execute (npx) is available by default wit NPM starting with version 5.2+, enabling the execution of any package from the packages repository without the need of installing that package locally on your machine.
This means we can execute the Nuxi package without having to install it locally.
What is Nuxi ?
Nuxt Command Line Interface (nuxi) is a set of terminal commands available enabling you to interact with the Nuxt framework to perform tasks and develop.
As mentioned previously there is no need to install nuxi or anything on your machine locally and as long as you have node and npm installed on your machine you're pretty much good to go. To install node and node version manager on your linux machine you might want to check out these articles
Once you have node and npm available on your machine you can start a new nuxt 3 project using the following terminal command
npx nuxi init name-of-your-project
In my case will simply use the command below with the name of may project, as geekiam.
npx nuxi init geekiam
Once you project has completed generating, change into the directory created and open the project in your preferred IDE. In my case I will be making use of use of Jetbrains Fleet which is very similar to VS Code.
cd geekiam fleet .
This will open the project and we should see the very Minimal Project layout
I generally make use of Node Version Manager and generally one of the first things I do when starting new projects is create an .nvmrc which helps to define a particular version of node that you would like to use for your project. I recommend using Homebrew on Linux to install NVM
After creating an .nvmrc file in the root of your project directory, enables you to simply run commands like nvm use, nvm install and nvm run which relates to the default node.js version defined in .nvmrc file.
To create an .nvmrc file I simply use the following terminal command
touch .nvmrc
Once the new file is created we can simply define the whichever version of the node we would like to use. I generally go for the most current LTS version, which at the time of writing is 18.12.1
We can now make use of the nvm use command to ensure our project will make use of the version of node we want. If the version is not currently installed in nvm we will be prompted to install it first and then install it, as is the case below
We can execute them commands nvm install and nvm use to set up our environment
I have become to prefer to make use of Yarn as my package manager of choice, so I just need to ensure that I have Yarn installed for my version of node I have installed. simply executing npm install -g yarn
Any of your preferred package managers can be used here, i,e, npm, pnpm etc I'm just going to use yarn
We now install our dependencies for your project using yarn install
We can use yarn dev to start the development instance of our new project and even browse to it in our browser
If we click on the link it will open our Example site in the Browser
Conclusion
That is as far as we're going to go in this post, because there is a lot to explore with nuxt, in understanding Nuxt 3 minimal project structure we take deeper dive into the project structure and explore how to start developing with it and learn some more capabilities provided to via nuxi.
- How to add Fathom Analytics to Nuxt 3 - May 19, 2023
- How to use Azure Blob Storage - May 8, 2023
- How to use Azure Key Vault to manage secrets - April 30, 2023