Nuxt 3 first steps.

Lukas Borawski
ITNEXT
Published in
8 min readJan 8, 2022
Photo by Bruno Nascimento on Unsplash

So I’m a huge Nuxt fan, and it’s quite obvious that I was very excited when the new framework version [3] was finally released. Just after I had a chance to install it and play a bit. But, we all know that this was a very early beta stage and during the first couple of days the issues tab on GitHub was fulfilled very fast. Naturally, my second thought was — let’s give it a spin to warm up a bit.

A couple of days ago I’ve decided to check the thing again. Before that, I’ve made some general research around already covered/translated third-party tools like modules, plugins, and libraries. Funny thing because there is an already created website that is gathering all of these things and informing us at what stage they are. Generally, if I’d trust in this it’s not looking super good, but work is in progress and we’re closer, day by day.

Update: Is Nuxt 3 ready website was closed and right now we can follow the official modules site to be up to date with the current status of Nuxt 3 peripherals.

Now, during my research, I found a lot of tutorials on how to connect Nuxt 3 with new modules like i18n, Algolia, or Axios. There were also ready-to-use templates with all the necessary dependencies. This is great, but the technology is new, fresh, and still not production-ready. It would be nice to at least know it better, all the nuances that it brings for our new projects. I have this feeling that everyone just rushed to fat stuff without even checking the current state of the solution's stability.

So let’s do this, bear with me, let’s try to install Nuxt from scratch and go through the first and most important steps. Here I have a tiny disclaimer tho— I ran into many issues and problems that were finally resolved, but in my opinion, it’s proving that the framework is far away from production-ready and stable. But this is just my subjective opinion.

One more disclaimer — I’m working with WebStorm IDE so some things may be different than with the VSC (Visual Studio Code), but I guess like super tiny ones.

Installation

Jumping to the installation of Nuxt 3…

npx nuxi@latest init my-app

OK, first things first. What’s nuxi? It’s the new Nuxt CLI (Command Line Interface) that will help you install and manage all the Nuxt ingredients.

As an output, you’ll get this.

🎉  Another dazzling Nuxt project just made! Next steps:📁  `cd my-app`💿  Install dependencies with `npm install` or `yarn install`🚀  Start development server with `npm run dev` or `yarn dev`

Great, let’s move to this new folder with my-app. What’s inside? Turns out that not so much… But this is great, why you’ll ask. Well, this is the new project structure.

Oh my, this is something much different than we know from the Nuxt installation process. So this is the new Nuxt minimal, starter setup that allows you to start creating your projects for your needs, without deleting folders and files, but with adding them, and TBH for me, it was very refreshing and quite interesting, smart maybe? You have here the app.vue file which is a simple Vue component and Nuxt, TypeScript configs. What’s even more intriguing configs are totally empty… well, nuxt.config.ts is, tsconfig.json is extended from the default one that is already placed in the Nuxt package.

Now I see why there are so many templates with all the folders and dependencies. It’s comfortable, yeah I know, whether it is not fatal to not knowing what is going on with your boilerplate? 🤔

Let’s proceed with the starter info that we got after initialization. Let’s install the dependencies.

npm install or yarn 

Vite

What’s most important from the installation process is that by default you’ll get the Vite on board. This is very nice however, Webpack will be installed as well, so you can switch from one to another. How? By setting vite to false in your nuxt.config.ts file. Like this.

UPDATE: Webpack is not installed by default anymore so you need to use a special module to use it. Now, Vite is the default one, which is great!

Please don’t do this though. If you don’t know Vite already you have to catch up, but in a couple of short words, it’s a super-fast build/bundle “engine” that will supercharge your development process. However, if you’ll decide to get rid of Vite, please note that you’ll need to install Webpack.

OK, here I would like to stop for a moment. So on one of my machines (MBP) I ran into some problems with Vite — it’s reporting some problems with the build and Nuxt source files.

UPDATE: OK, from the stable version of Nuxt this issue is not current anymore. However, maybe you will jump on it so I’ll leave this section here.

[vite:import-analysis] Cannot read property 'uid' of undefined

And as for now, I can’t find any solution or related issue, either on the Nuxt repo or Vite. Maybe it will be covered with the new version, maybe it’s something with my new M1 Mac, or maybe it’s something with dependencies. It’s funny though, because on the other Mac (Mini) it’s working super fine. Tried with different versions of libs, even Node. Nothing helped.

To fix this problem I’ve used the Webpack, but here it didn’t go without problems as well. Something is wrong with HMR (Hot Module Replacement) and it’s not stopping after the app is running, it’s constantly refreshing — not waiting for changes — and finally clogs the browser. Again, this may be something with “me”, because I can’t find any similar issue around the Nuxt ecosystem. One thing that you can do with that is to disable HMR, which is not so efficient, but as for now, it’s the problem resolution. Here is how you can do it.

Be careful, the new Nuxt config is a bit different than the old one, check the TS interfaces, it will help you with all the settings.

ESLint and Prettier

Alright, let’s move to something more pleasing. In all of my projects, I’m using ESLint and Prettier, and here I would like to have them too. Again, your new Nuxt project will be quite nude so you’ll need to add some additional third-party helpers, like the above ones. After some tests and research, I polished the best set of default rules and recommendations that you can use for your new Nuxt/Vue 3 project. This is it, your .eslintrc.js file.

Run this command to install all of them.

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-standard eslint-config-prettier eslint-plugin-prettier eslint-plugin-nuxt eslint-plugin-vue

Right, rules and custom setup are something that you can set for your own needs, but I would like to add a short note here. You probably will start creating your components with new <script setup> notation and while importing some external resources like components you’ll get the issue of non-used vars — at least with WebStorm, and I’m guessing that with VSC as well. So to handle this one you can add some special rules to your .eslintrc.js file.

'vue/script-setup-no-uses-vars': 'off'

Now if you’ll define that kind of component, you’ll not get reported issues about any used, defined vars, but just for Vue-related ones.

The prettier config is also something personal, so I’ll not be pasting it here. 😏 The same for ESLint ignore the file, create it, and fill it for your setups.

Finally, you can add this script to your package.json file.

"lint": "eslint --ext .js,.ts --ignore-path .eslintignore ."

Pages and Layouts

OK. One of Nuxt's great features is autogenerated routing. It’s laying on the pages folder structure. Before Nuxt will recognize this structure you need to remove app.vue file from your root folder. Then create the pages folder. Put there index.vue file. Nice, you have your first autogenerated page, like with old good Nuxt right? More about this magic folder you can read here.

With the Vite on borad all of this actions and processes will be so fast.

What’s more important you need some layout for your pages, and the layouts feature is still available with Nuxt 3, but the construction of it is a bit different. Now you’re not using <nuxt /> component to place pages content but slots. Of course, you need to create the default layout. Like this.

Now if you’ll put something in the index page this will be displayed around the default layout within the <slot /> area.

Autoimports

Probably this one will blow your mind. Now Nuxt 3 is able to auto import your components and even composables. You just need to put them into the dedicated folders and that’s it. Not need to use imports in your components anymore, so sexy and clean solution! You can check it in action along with this special demo.

Page Meta

This thing is still with us with Nuxt 3. But now you need to use it with a bit different configuration. You can use it like this.

What’s even better from now you can define metadata right from your components markup. This is crazy and awesome at the same time TBH.

Page data with <script setup>

This one might be not current for everybody but if you’re using <script setup> it and you’ll be willing to add some additional page data like title along with your script setup notation you’ll need an additional script. Like this.

Remember to keep the same lang definition for both.

UPDATE: From version 3.5 you now have default macro defineOptions and you don’t need this kind of duplication anymore. Check more details here.

Static assets

Another thing that is quite different, now to expose some static assets like images, and fonts or so you need to create public folder in your root one and put there your static stuff. Linking will look like that.

<img src="/img/icon/icon.svg" alt="Icon" />

Well done. I think that you have all the necessary items to start your development with Nuxt 3. Of course, the wall will start growing now. We can tackle it with the next article — fetching data, styles, composables, and so on. Keep checking my profile for more. You can subscribe also to the newsletter to not miss this great contents. Cheers, Lukas.

Do you want more?

Check out Nuxt 3 the Next Steps article now, for more advanced Nuxt techniques and features. This is growing super fast.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in ITNEXT

ITNEXT is a platform for IT developers & software engineers to share knowledge, connect, collaborate, learn and experience next-gen technologies.

Written by Lukas Borawski

Myself: full-stack engineer, team leader, Portugal. My things: tech, cycling, running, photography, books, HC music & coffee.

Responses (1)

What are your thoughts?

Thanks Lucas!
Btw one super handy thing is not having to import component from the component folder any more. And one can even add a subfolder in there and use the component like <SubfolderComponent/>

--