12

I'm learning Vue, and it's ecosystem, and now I read about nuxt.js.

As I understand, this is tool which help us to build Vue apps, but don't we do the same with vite.js?

What's the difference between them?

kissu
  • 40,416
  • 14
  • 65
  • 133
Explicit
  • 133
  • 1
  • 1
  • 6
  • 1
    I recommend working with Vue quite a bit before going to Nuxt btw. Don't rush the steps and learn the basics of Vue well. – kissu Aug 09 '22 at 23:10

1 Answers1

18

Vite is a build tool like Webpack, that will basically allow you to work locally on your app and build it for production. It will also bring to the table various loaders, Hot Module Replacement capabilities, environment variables, assets managements etc.

Nuxt is totally unrelated to all of this. It is comparable to Gatsby/Next/Vitepress for a React/Svelte equivalent.

It's goal is to provide more capabilities to VueJS. For example, Vue can only be run as an SPA, meaning that you will not get any kind of indexing with search engines, while Nuxt do have SSR and SSG modes that will allow your websites to be efficiently crawled.

It also brings a lot of Developer Experience niceties: auto import of the composition API, of the components, simple routing, huge ecosystem thanks to all of Nuxt's modules, simpler configuration etc...
It's more like VueJS apps on steroids basically!

Also, latest version of Nuxt (v3) works with Vite out of the box. So, both of them are complementary because you need a build tool to work nowadays in the JS ecosystem + you get more features than just VueJS.

There are tools like vite-plugin-ssr and vitesse (created by one Nuxt's core maintainer btw) who can solve the basic needs of statically generating some routes/etc but it's not as powerful, have smaller communities around it and is overall moving a bit slower.

Trusting people who are behind Nuxt/Vite is also an important aspect, and most of them are well known in the community + are serious daily maintainers!

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Google search engine is reading JavaScript files on page. So you will have well indexed SPA page. But you won't have nice cards on Facebook and other sites and apps with may crawl your page. – Mises Aug 09 '22 at 23:16
  • @Mises even if it works somewhat, it's far from being good enough hence why I'm simplifying by saying it just doesn't. Google is asking you to go the extra mile nowadays, so an SPA is not good enough. – kissu Aug 10 '22 at 00:06
  • Would love to know what does the "not as powerful" mean specifically, that would be a good insight for people deciding whether to use nuxt or vite as those two are what [vue ssr docs](https://vuejs.org/guide/scaling-up/ssr.html#higher-level-solutions) mention as options. – Klesun Apr 26 '23 at 16:02
  • @Klesun as explained above, Vite is a bundler so it will only manage that part. Nuxt on the other side, is a powerful Vue app on steroids with a lot things around it (SSR baked in, routes, advanced life cycle hooks etc...) + a huge ecosystem. You can do all of this with Vite but it will require more time/work/knowledge overall. Also, Nuxt is specific to Vue while Vite can be used by any kind of Framework (React, Svelte, Astro etc...). – kissu Apr 27 '23 at 01:02