Let me introduce you to <a href="https://nuxt.com/" rel="noopener noreferrer">Nuxt</a>, a tool that makes web development simple. You need very little to have a ready-to-use web application and with just a few more clicks you can deploy it. Especially smaller projects that don't require too much additional functionality can be written in it smoothly. At the same time, it offers plenty of options to go deeper and create sophisticated web applications as well.

In the following series of articles, we will gradually look at it in more detail.

<h2>
 
 
 What is it about?
</h2>

Nuxt is a meta-framework for creating web applications in (predominantly) JavaScript or TypeScript. It is built on top of <a href="https://vuejs.org/" rel="noopener noreferrer">Vue.js</a>, which is "the third one" in the family of large and popular JavaScript frameworks (alongside <a href="https://react.dev/" rel="noopener noreferrer">React</a> and <a href="https://angular.io/" rel="noopener noreferrer">Angular</a>). Unlike those two, it is not backed by a large tech company, but purely by an open-source community. A colleague who knows Angular finds programming in Vue being "punk", but perhaps that's why I've been enjoying exploring its world lately.

Like other tools of this type, it abstracts developers from the necessity of constantly repeat boring and repetitive basic tasks and helps them focus on important functional and content matters. Nuxt goes even further than pure Vue.js – many things that you would otherwise have to write manually can be handled simply by placing a file in the correct format into the designated directory. Moreover, the term meta-framework refers to the fact that it's more than just a library for creating frontends – it also offers, among other features, a sophisticated way to create your own JS/TS backend.

This website is also written in it, for example.

<h2>
 
 
 What do you need?
</h2>

All you need is a JavaScript runtime. The best option is arguably the latest LTS version of <a href="https://nodejs.org/" rel="noopener noreferrer">Node.js</a> on the computer where you want to develop. The resulting application can also run in a Node.js environment, but this isn't strictly necessary. Nuxt allows you to generate static JavaScript output that can run in any modern browser. While you'll lose some features this way, ordinary static web hosting would be sufficient. On the other hand, in today's era of cloud services and containers, the "dynamic" variant is no longer a problem either.

Other prerequisites include some knowledge of HTML, CSS, and JavaScript. Ideally, at least a basic understanding of TypeScript is also helpful. The Vue.js and Nuxt developers emphasize that they don't force anyone into TypeScript, but from my own experience, it's a significant step forward and worth the time spent learning and exploring. Type checking will help you catch many trivial errors before they accidentally make it into production, saving you from having to debug them later.

To program comfortably, you'll want an IDE. For JavaScript development, <a href="https://code.visualstudio.com/" rel="noopener noreferrer">VS Code</a> is probably the best choice – it's designed for it, it's excellent, it's free, and it has many plugins, including the <a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar" rel="noopener noreferrer">official Vue extension</a>. Most people in the Vue.js community use it as well.

For installing and managing JavaScript dependencies in your local environment, you need a package manager. Just like with JS frameworks, there are multiple options. For a long time, I used <code>npm</code>, which came first and much of the current JavaScript world is built around it. However, the more advanced <code>pnpm</code> has one significant advantage – using symlinks to a single central directory, it deduplicates dependencies from different projects that would otherwise be downloaded into local <code>node_modules</code> repeatedly, slowly consuming gigabytes of your disk space. Another minor benefit is that scripts defined in <code>package.json</code> can be run directly as <code>pnpm script</code> (whereas in npm it's <code>npm run script</code>). I've never tried <code>yarn</code>, although I know many people prefer and recommend it. The choice is yours – the general principles are the same, and ultimately it's just about the command syntax.

Last but not least, you'll need <code>Git</code> for managing and versioning source code. For smaller test projects, you might get by without it, but for developing anything more substantial, it's almost essential. If you prefer other version control systems, you'll need to adapt accordingly. I once started with SVN at work, but I wouldn't want to go back.

<h2>
 
 
 How to get started?
</h2>

Guides, tips, and tricks will be added into the series gradually. You can access individual chapters using the links in the box below.

For now, you can check out my growing repository with demo projects: <a href="https://github.com/AloisSeckar/demos-nuxt" rel="noopener noreferrer">demos-nuxt @ GitHub</a>. It assumes the use of <code>Git</code> and <code>pnpm</code>.

Then, of course, there are the official resources:

<ul>
<li><a href="https://nuxt.com/docs" rel="noopener noreferrer">Nuxt documentation</a></li>
<li><a href="https://github.com/nuxt/nuxt/discussions" rel="noopener noreferrer">Nuxt forum</a></li>
</ul>

I started writing these articles back in 2023. I'll be releasing them one by one. As Nuxt continues to evolve, the content of my articles will (hopefully) evolve along with it. If you come across something that's no longer valid, or something I learned incorrectly, please let me know.

Now let's move on to the <a href="https://dev.to/aloisseckar/nuxt-tutorial-1-first-steps-2jp5">first minimal project created using the Nuxt framework</a>.

يتم تقديم Nuxt كإطار عمل ميتا لتطوير تطبيقات الويب، بشكل أساسي باستخدام JavaScript أو TypeScript. يبسط العملية، مما يجعله مثاليًا للمشاريع الصغيرة، بينما يدعم أيضًا التطبيقات الأكثر تعقيدًا. هذه الأداة مفتوحة المصدر، المبنية على Vue.js، هي جزء من عائلة من الأطر الشعبية إلى جانب React وAngular، وسيتم استكشافها في سلسلة من المقالات القادمة.

Se presenta Nuxt como un meta-framework para el desarrollo de aplicaciones web, principalmente utilizando JavaScript o TypeScript. Simplifica el proceso, siendo ideal para proyectos más pequeños, mientras que también admite aplicaciones más complejas. Esta herramienta de código abierto, construida sobre Vue.js, forma parte de una familia de frameworks populares junto a React y Angular, y se explorará en una serie de artículos próximos.

Nuxt est présenté comme un méta-framework pour le développement d'applications web, principalement en JavaScript ou TypeScript. Il simplifie le processus, le rendant idéal pour les petits projets tout en prenant en charge des applications plus complexes. Cet outil open-source, construit sur Vue.js, fait partie d'une famille de frameworks populaires aux côtés de React et Angular, et sera exploré dans une série d'articles à venir.

Nuxt is introduced as a meta-framework for web application development, primarily using JavaScript or TypeScript. It simplifies the process, making it ideal for smaller projects while also supporting more complex applications. This open-source tool, built on Vue.js, is part of a family of popular frameworks alongside React and Angular, and will be explored in a series of upcoming articles.

Nuxt Tutorial 0 - Introduction

Was this article worth reading? Share it

Ready to build your own newsroom?