{"id":130692,"date":"2026-06-10T10:06:20","date_gmt":"2026-06-10T10:06:20","guid":{"rendered":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-nuxt\/"},"modified":"2026-06-10T10:06:20","modified_gmt":"2026-06-10T10:06:20","slug":"what-is-nuxt","status":"publish","type":"post","link":"\/ph\/tutorials\/what-is-nuxt","title":{"rendered":"What is Nuxt and how it works"},"content":{"rendered":"<p>Nuxt is a free, open-source framework built on top of Vue.js. It handles the setup work behind a modern website or web app, including routing, rendering, and the server layer, so you can start building without configuring everything by hand.<\/p><p>How Nuxt builds each page affects how fast it loads and how easily search engines can read it. You can choose the right rendering method for each page instead of locking the whole site into one approach.<\/p><p>Nuxt supports server-side rendering (SSR), where the page is built on the server first, and static site generation (SSG), where pages are built ahead of time. It also uses file-based routing, so your folder structure becomes your site&rsquo;s URLs.<\/p><p>You build the interface with Vue components, the reusable building blocks of the screen. The Nitro server engine handles the server-side and lets you add backend logic. Together, these give you Nuxt&rsquo;s full-stack capabilities, so you can build both the front and back of an app in one place.<\/p><h2 class=\"wp-block-heading\" id=\"h-what-is-nuxt\">What is Nuxt?<\/h2><p>Nuxt is an open-source framework that builds on Vue.js to create websites, web apps, and full-stack apps. Where Vue handles the parts users see and interact with on screen, Nuxt adds the structure around it.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6a29f5cb6d0fe\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a29f5cb6d0fe\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2026\/06\/1781084227839-0.png\" alt=\"Screenshot of Nuxt landing page\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Most of that structure comes from conventions rather than manual setup. Nuxt expects certain folders to handle specific tasks, so you don&rsquo;t have to wire everything together by hand. Files in the <code>pages<\/code> directory become routes, layouts define the shared frame around your pages, and Vue components make up the reusable parts of the interface, like buttons, menus, and search boxes.<\/p><p>This makes Nuxt useful for anything from a simple <a data-wpel-link=\"internal\" href=\"\/ph\/tutorials\/what-is-web-application\" rel=\"follow\"><\/a><a data-wpel-link=\"internal\" href=\"\/ph\/tutorials\/what-is-web-application\" rel=\"follow\">web application<\/a> like a marketing site to a full app with logins, live data, and backend logic. It keeps Vue&rsquo;s familiar component-based approach but adds the tools larger projects need to stay organized.<\/p><p>Nuxt is one of the main reasons teams pick Vue when a project needs strong structure, better search visibility, or server-side features. The current version, Nuxt 4, runs on Vue 3 and modern development workflows.<\/p><h2 class=\"wp-block-heading\" id=\"h-nuxt-vs-vue\">Nuxt vs. Vue<\/h2><p>Nuxt and Vue solve different parts of the same problem: Vue builds the interface, and Nuxt builds the application around it.<\/p><p>Vue is one of the most widely used <a data-wpel-link=\"internal\" href=\"\/ph\/tutorials\/frontend-frameworks\" rel=\"follow\"><\/a><a data-wpel-link=\"internal\" href=\"\/ph\/tutorials\/frontend-frameworks\" rel=\"follow\">frontend frameworks<\/a>, focused on creating screens and handling user interactions such as clicks, typing, and scrolling. Nuxt takes that and adds the higher-level structure a full site needs, like routing, rendering options, and a server.<\/p><p>The clearest difference shows up in how each handles routing and rendering. With plain Vue, you set up routing yourself and render pages in the browser by default, which can make them harder for search engines to read.<\/p><p>Nuxt generates routes from your files automatically and lets you render pages on the server or ahead of time, which helps both speed and search visibility.<\/p><p>Here&rsquo;s how they compare:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td colspan=\"1\" rowspan=\"1\"><p><strong>Feature<\/strong><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><strong>Vue<\/strong><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><strong>Nuxt<\/strong><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>Scope<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Builds user interfaces<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Builds full applications on top of Vue<\/span><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>Routing<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Set up manually<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Created automatically from your files<\/span><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>Rendering<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>In the browser by default<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Server-side, static, or in the browser<\/span><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>SEO<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Needs extra work<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Easier with SSR and static generation<\/span><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>Project structure<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>You decide the layout<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Set folders for set jobs<\/span><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>Developer experience<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Flexible, but more setup<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Guided, with less configuration<\/span><\/p><\/td><\/tr><\/tbody><\/table><\/figure><p><strong>Choose Nuxt when search visibility matters,<\/strong> like for a blog, a store, or any content-heavy site. Its server-side and static rendering give search engines fully built HTML to read, which is harder to get from plain Vue. It&rsquo;s also the better pick for larger projects, where a clear, shared structure keeps a team on the same page.<\/p><p><strong>Plain Vue still makes sense for smaller projects.<\/strong> For an app that lives entirely in the browser, like an internal tool behind a login where search ranking doesn&rsquo;t matter, <a data-wpel-link=\"internal\" href=\"\/ph\/tutorials\/what-is-vue-js\" rel=\"follow\"><\/a><a data-wpel-link=\"internal\" href=\"\/ph\/tutorials\/what-is-vue-js\" rel=\"follow\">Vue.js<\/a> on its own is lighter and lets you set things up exactly how you want.<\/p><p>Use Nuxt when you want structure and rendering options, and use Vue on its own when you want a lighter, more custom setup.<\/p><h2 class=\"wp-block-heading\" id=\"h-nuxt-key-features\">Nuxt key features<\/h2><p>Nuxt&rsquo;s key features handle the big jobs of a Vue project: rendering pages, organizing the project, running the server side, and the tooling you build with. Each one removes the setup you&rsquo;d otherwise do by hand.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6a29f5cb6d5cc\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a29f5cb6d5cc\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2026\/06\/1781084233113-0.jpeg\" alt=\"Visual diagram Nux key features\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\">Server-side rendering (SSR)<\/h3><p>SSR means the page is fully built on the server and sent to the browser as finished HTML, the code that makes up a web page. Instead of sending a near-empty page for the browser to assemble, the server does the work first and hands over a complete page.<\/p><p>In a Nuxt app, when someone visits a page, the server runs your Vue components, builds the HTML, and sends it to the client ready to display. The visitor sees real content almost immediately, rather than a blank screen while scripts load.<\/p><p>Once the page arrives, the same code runs again in the browser to wire up clicks, forms, and other interactions, a step called hydration. Nuxt does this by default and calls the combined approach universal rendering, since the code runs on both the server and the browser.<\/p><p>That head start helps in two ways. The page feels faster because the content loads immediately, which matters most on older phones and weak connections. And search engines can read the page more easily, since the content is in the HTML rather than appearing only after scripts run.<\/p><p>SSR suits pages that depend on fresh data, like dashboards, ecommerce listings, or anything tied to a logged-in user. It&rsquo;s also just one of Nuxt&rsquo;s rendering modes, and you can mix it with the others across a single site.<\/p><h3 class=\"wp-block-heading\">Static site generation (SSG)<\/h3><p>SSG builds your pages during the build step, rather than building them fresh for each visitor. The result is a set of plain HTML files ready to serve the moment someone requests them.<\/p><p>Because the pages are already built, you can serve them from a CDN or any basic web server. A CDN is a network of servers spread around the world that delivers files from the location closest to each visitor.<\/p><p>No work is done for each request, so pages load quickly, and the server stays under very little load. The same setup scales easily, too, since ten people and ten thousand people all receive the same pre-built files.<\/p><p>The difference between SSR and SSG comes down to timing. SSR builds each page when someone requests it, so it can show live data. SSG builds pages earlier, during the build, so the content is fixed until you build again. That makes SSG the better fit for content that doesn&rsquo;t change often.<\/p><p>Use SSG for <strong>blogs, documentation, landing pages, and marketing sites, <\/strong>and save SSR for <strong>pages that need live or personalized data.<\/strong><\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6a29f5cb6d9af\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a29f5cb6d9af\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2026\/06\/1781084237444-0.jpeg\" alt=\"Visual comparison diagram of SSR vs. SSG\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\">File-based routing<\/h3><p>File-based routing means Nuxt automatically generates your site&rsquo;s URLs from how you organize your files. You don&rsquo;t write a separate routing config; you just create files in the right folder, and the routes appear.<\/p><p>Specifically, Nuxt looks inside the <code>pages<\/code> directory and turns each file there into a route. The file&rsquo;s location becomes the URL:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">pages\/index.vue        &rarr;  \/\npages\/about.vue        &rarr;  \/about\npages\/blog\/post.vue    &rarr;  \/blog\/post\npages\/blog\/[slug].vue  &rarr;  \/blog\/my-first-post<\/pre><p>You add a page by adding a file, which keeps the whole thing easy to follow.<\/p><p>This setup covers the routing patterns most sites need:<\/p><ul class=\"wp-block-list\">\n<li><strong>Automatic route generation &ndash; <\/strong>every file in <strong><code><\/code><\/strong><code>pages<strong><\/strong><\/code> becomes a usable URL with no extra setup.<\/li>\n\n\n\n<li><strong>Dynamic routes &ndash; <\/strong>a file like <strong><code><\/code><\/strong><code>[id].vue<strong><\/strong><\/code> handles many pages at once, such as one file serving every product or blog post.<\/li>\n\n\n\n<li><strong>Nested routes &ndash; <\/strong>folders inside <strong><code><\/code><\/strong><code>pages<strong><\/strong><\/code> become nested URLs, so a folder structure mirrors the paths visitors see.<\/li>\n<\/ul><p>The payoff is less setup and a cleaner project. With manual routing, you keep a separate list of routes in sync with your files by hand, and the two easily fall out of step. With file-based routing, your folder structure serves as the routing, so what you see in your files is exactly what visitors see in the address bar.<\/p><h3 class=\"wp-block-heading\">Vue components and layouts<\/h3><p>Components and layouts are the building blocks of a Nuxt interface. A component is a small, reusable part of the screen, such as a button or a navigation bar. A layout is the shared frame that wraps around your pages, like a header and footer that stay the same as visitors move from one page to the next.<\/p><p>You write a component once and reuse it wherever you need it. A navigation bar built as one component can appear on every page, and changing it in one place updates it everywhere. Components can also hold other components, so a product page might combine a header, an image gallery, and a price box.<\/p><p>Each component can be customized through <strong>props<\/strong>. Props are the values you pass into a component to set it up, like passing a product card its name and price to display. The same card component can then display hundreds of different products, each filled in through its props, and Nuxt draws each one using Vue&rsquo;s templates, the part that describes what the component looks like on screen.<\/p><p>Layouts handle the repeating structure, so you don&rsquo;t have to rebuild it page by page. A blog might use one layout for articles and another for the homepage, while a dashboard and a product page each get layouts that fit their purpose. Components handle the small pieces, layouts handle the frame, and together they keep the project organized as it grows.<\/p><h3 class=\"wp-block-heading\">Nitro server engine<\/h3><p>Nitro is Nuxt&rsquo;s built-in server engine, the part that runs everything on the server side. It powers server-side rendering, handles your API routes, runs your backend logic, and prepares your app for deployment across different hosting setups. It&rsquo;s been the backbone of Nuxt&rsquo;s server-side since Nuxt 3.<\/p><p>With Nitro, you can build server features directly inside your Nuxt project:<\/p><ul class=\"wp-block-list\">\n<li><strong>Server API routes &ndash;<\/strong> create backend endpoints, the addresses your app calls to fetch or save data, inside the <code>server<\/code> folder.<\/li>\n\n\n\n<li><strong>Backend logic &ndash;<\/strong> run code on the server, like processing a form or talking to a database.<\/li>\n\n\n\n<li><strong>Deployment flexibility &ndash; <\/strong>Nitro builds your app into a standalone output folder, named <code>.output<\/code>, that runs on many platforms.<\/li>\n\n\n\n<li><strong>Serverless and edge support &ndash; <\/strong>deploy to serverless platforms or to edge networks, which run your code on servers physically close to each visitor for faster responses.<\/li>\n\n\n\n<li><strong>Optimized production output &ndash; <\/strong>the build is trimmed down so it starts quickly and carries only what it needs to run.<\/li>\n<\/ul><p>For simpler projects, this removes a whole layer of work. Nitro lets you write your server logic right alongside your front end, in the same project, with the same tools. A small app that saves a contact form or pulls data from a database can handle everything in Nuxt, with no additional service to set up or maintain.<\/p><h3 class=\"wp-block-heading\">Full-stack development support<\/h3><p>Full-stack support means a Nuxt project can hold both the front end people interact with and the back end that powers it, in the same place. Nitro is what makes that possible, so you&rsquo;re not running a separate backend service or keeping two codebases in sync.<\/p><p>That opens up the pieces that a complete, logged-in app depends on:<\/p><ul class=\"wp-block-list\">\n<li><strong>Database integration &ndash;<\/strong> connecting your app to where its data lives, like a list of users or orders.<\/li>\n\n\n\n<li><strong>Authentication &ndash;<\/strong> managing logins and who&rsquo;s allowed to see what.<\/li>\n\n\n\n<li><strong>Data fetching &ndash;<\/strong> pulling that data into your pages, ready to render on the server or in the browser.<\/li>\n<\/ul><p>This is what lets a single Nuxt project run a SaaS app, an admin panel, a dashboard, or any site with user logins, handling both the screens people see and the server work behind them. For small and mid-sized builds, that&rsquo;s the difference between maintaining one project and stitching together two.<\/p><h3 class=\"wp-block-heading\">TypeScript support<\/h3><p>Nuxt supports TypeScript with no extra setup, so you can write code that catches mistakes before they ever run. TypeScript is a version of JavaScript that adds types, which are labels telling your code what kind of value it&rsquo;s working with, like a number or a piece of text. If something doesn&rsquo;t match, you find out as you write rather than after the app is live.<\/p><p>This support runs throughout a Nuxt project. Your components and composables, the reusable bits of logic Nuxt uses, can be fully typed. Your editor gives you better autocomplete, suggesting the right options as you type. And many errors get flagged early, before they turn into bugs your users would hit.<\/p><p>For larger projects and teams, this keeps things consistent. When several people work on the same codebase, types act as a shared agreement about how each part should be used, so a change in one spot doesn&rsquo;t quietly break another.<\/p><p>You get all of this without configuring TypeScript yourself, since Nuxt sets it up for you. Lean on it most when your project or team is growing, which is where it pays off.<\/p><h3 class=\"wp-block-heading\">Modern development tooling<\/h3><p>Nuxt comes with modern development tools that make building faster and smoother. The main one is<a href=\"\/ph\/tutorials\/what-is-vite\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a href=\"\/ph\/tutorials\/what-is-vite\" data-wpel-link=\"internal\" rel=\"follow\">Vite<\/a>, the build tool Nuxt uses to compile your code and run your local development server. Vite is built for speed, so your changes show up in the browser in a fraction of a second instead of after a long rebuild.<\/p><p>Four of these tools directly affect your day-to-day work:<\/p><ul class=\"wp-block-list\">\n<li><strong>Hot module replacement &ndash;<\/strong> when you save a change, it shows up in the browser instantly without a full page reload.<\/li>\n\n\n\n<li><strong>ES modules &ndash;<\/strong> a modern way of organizing JavaScript that keeps code clean and loads only what&rsquo;s needed.<\/li>\n\n\n\n<li><strong>Composables &ndash;<\/strong> reusable pieces of logic you can share across your app, auto-imported by Nuxt so you don&rsquo;t write import lines for them.<\/li>\n\n\n\n<li><strong>Modern build tooling &ndash;<\/strong> Nuxt handles the build process for you, so you&rsquo;re not configuring it by hand.<\/li>\n<\/ul><p>Together, these shorten the gap between writing code and seeing the result. Faster rebuilds mean less waiting, and auto-imports mean you skip the repetitive import lines that pile up in a plain Vue project.<\/p><h2 class=\"wp-block-heading\" id=\"h-why-developers-use-nuxt\">Why developers use Nuxt<\/h2><p>Developers choose Nuxt because it handles the setup work a Vue project needs before the first feature gets written.<\/p><ul class=\"wp-block-list\">\n<li><strong>Built-in SSR and SSG support<\/strong> &ndash; server-side rendering and static generation work without heavy manual setup, so you pick a rendering mode instead of building one.<\/li>\n\n\n\n<li><strong>Better SEO support<\/strong> &ndash; server-rendered and pre-built pages give search engines real HTML to read, which helps your pages rank.<\/li>\n\n\n\n<li><strong>Structured architecture<\/strong> &ndash; file-based routing, layouts, and clear conventions keep projects organized, so a new teammate can find their way around the code without a tour.<\/li>\n\n\n\n<li><strong>Faster development workflows<\/strong> &ndash; routing, rendering, and tooling come ready to go, cutting down the setup before you write a feature.<\/li>\n\n\n\n<li><strong>Full-stack capabilities<\/strong> &ndash; the Nitro engine lets you add API routes and server logic without a separate backend.<\/li>\n\n\n\n<li><strong>Vue ecosystem integration<\/strong> &ndash; Nuxt extends Vue while keeping its familiar patterns, so Vue developers feel at home.<\/li>\n\n\n\n<li><strong>Modern tooling support<\/strong> &ndash; Vite, TypeScript, composables, and current front-end workflows are built in.<\/li>\n\n\n\n<li><strong>Flexible deployment options<\/strong> &ndash; the same app can run on static hosting, a Node.js server, serverless platforms, or edge networks, with no vendor lock-in.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-what-are-nuxts-use-cases\">What are Nuxt&rsquo;s use cases?<\/h2><p>Nuxt works well for SEO-focused websites, content platforms, Vue-based full-stack apps, and any project that benefits from server-side rendering or static generation. Because you can set the rendering mode per page, one framework covers both content sites that need to rank and apps that run behind a login.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6a29f5cb6e398\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a29f5cb6e398\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2026\/06\/1781084242203-0.jpeg\" alt=\"Visual diagram of what Nux use cases: marketing websites, blog and content platforms, ecommerce front end, SaaS dashboards, PWAs, and full-stack Vue apps.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Marketing websites<\/strong> &ndash; SSR and SSG give these fast load times and strong search visibility, so the right people find the page.<\/li>\n\n\n\n<li><strong>Blogs and content platforms<\/strong> &ndash; static generation suits content-heavy publishing, building articles ahead of time for quick delivery.<\/li>\n\n\n\n<li><strong>Ecommerce front ends<\/strong> &ndash; Nuxt supports SEO, fast rendering, and dynamic features like live inventory, so storefronts load quickly and rank well.<\/li>\n\n\n\n<li><strong>SaaS dashboards<\/strong> &ndash; with logins and server-side logic built in, Nuxt handles authenticated apps in one place.<\/li>\n\n\n\n<li><strong>Progressive web apps (PWAs)<\/strong> &ndash; Nuxt can build browser-based apps with app-like behavior, like offline support and an installable home-screen icon.<\/li>\n\n\n\n<li><strong>Full-stack Vue applications<\/strong> &ndash; front-end rendering and backend logic share one framework, so you build the whole app together.<\/li>\n<\/ul><p>What ties these together is flexibility: a Nuxt project can serve static pages, render dynamic content on the server, and add backend features as needed. That suits projects that start simple but need room to grow, and <a href=\"\/ph\/web-apps-hosting\" data-wpel-link=\"internal\" rel=\"follow\">web app hosting<\/a> supports both the static files and the server output Nuxt produces.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/ph\/vps-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/VPS-hosting-banner-1024x300.png\" alt=\"\" class=\"wp-image-77934\" srcset=\"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/02\/VPS-hosting-banner.png 1024w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/02\/VPS-hosting-banner-300x88.png 300w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/02\/VPS-hosting-banner-150x44.png 150w, https:\/\/www.hostinger.com\/ph\/tutorials\/wp-content\/uploads\/sites\/44\/2023\/02\/VPS-hosting-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-what-are-the-limitations-of-nuxt\">What are the limitations of Nuxt?<\/h2><p>Nuxt&rsquo;s higher-level structure and rendering features come with trade-offs in flexibility, complexity, and the hosting requirements they support. The rules that speed up a large project can feel like extra weight on a small one.<\/p><ul class=\"wp-block-list\">\n<li><strong>More abstraction<\/strong> &ndash; Nuxt hides parts of the setup behind its rules, which is convenient until you need to see exactly what the framework is doing for you.<\/li>\n\n\n\n<li><strong>Increased complexity<\/strong> &ndash; SSR, routing, and server features add moving parts that plain Vue doesn&rsquo;t have.<\/li>\n\n\n\n<li><strong>Higher hosting requirements<\/strong> &ndash; static Nuxt sites run on any basic host, but server-side-rendered apps require Node.js hosting, serverless, or another compatible server.<\/li>\n\n\n\n<li><strong>Learning curve<\/strong> &ndash; you&rsquo;ll need to understand the rendering modes, the routing structure, and Nuxt&rsquo;s conventions before you&rsquo;re comfortable with it.<\/li>\n\n\n\n<li><strong>Potential overkill for small apps<\/strong> &ndash; a small browser-only project won&rsquo;t need most of what Nuxt offers, making plain Vue the lighter choice.<\/li>\n<\/ul><p>None of these are dealbreakers for the projects Nuxt is built for. If you need structure, SEO-friendly rendering, or server-side features, the trade-offs are worth it; if you&rsquo;re building something small that runs only in the browser, plain Vue is the simpler option.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-deploy-your-nuxt-application\">How to deploy your Nuxt application<\/h2><p>Nuxt applications need to be built into production files before you can deploy them, and the command you run depends on how the app is hosted.<\/p><p>For a server-rendered app, run:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm run build<\/pre><p>This creates a <code>.output<\/code> folder with everything needed to run in production, and you start the app on a Node.js server with <code>node .output\/server\/index.mjs<\/code>.<\/p><p>For a fully static site, run:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm run generate<\/pre><p>This pre-renders your pages into static files in <code>.output\/public<\/code>, which you upload to any static host or CDN.<\/p><p>Either way, the steps to <a data-wpel-link=\"internal\" href=\"\/ph\/tutorials\/how-to-host-a-web-application\" rel=\"follow\"><\/a><a data-wpel-link=\"internal\" href=\"\/ph\/tutorials\/how-to-host-a-web-application\" rel=\"follow\">host a web app<\/a> are the same as for any other project:<\/p><ol class=\"wp-block-list\">\n<li>Run the command for your rendering mode, <strong><code>npm run build<\/code><\/strong> or <strong><code>npm run generate<\/code><\/strong><\/li>\n\n\n\n<li>Upload the static files, or deploy the server output, to your hosting environment<\/li>\n\n\n\n<li>Point your domain at the deployed app and confirm it loads<\/li>\n<\/ol><p>Hostinger <a data-wpel-link=\"internal\" href=\"\/ph\/web-apps-hosting\/nuxt-hosting\" rel=\"follow\"><\/a><a data-wpel-link=\"internal\" href=\"\/ph\/web-apps-hosting\/nuxt-hosting\" rel=\"follow\">Nuxt hosting<\/a> supports both the server bundle and static builds, so whichever rendering mode you choose has a place to deploy without extra configuration.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6a29f5cb6fc6a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a29f5cb6fc6a\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2026\/06\/1781084247331-0.png\" alt=\"Hostinger Nuxt hosting landing page\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nuxt is a free, open-source framework built on top of Vue.js. It handles the setup work behind a modern website or web app, including routing, rendering, and the server layer, so you can start building without configuring everything by hand. How Nuxt builds each page affects how fast it loads and how easily search engines [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ph\/tutorials\/what-is-nuxt\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":624,"featured_media":130693,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"What is Nuxt? A guide to the Nuxt.js Vue framework","rank_math_description":"What is Nuxt? Learn how this Vue.js framework handles server-side rendering, static sites, routing, and full-stack apps, plus when to use it over plain Vue.","rank_math_focus_keyword":"what is nuxt","footnotes":""},"categories":[22646],"tags":[],"class_list":["post-130692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-app"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-nuxt\/","default":1},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-nuxt\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-nuxt\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-nuxt\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-nuxt\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-nuxt\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-nuxt\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-nuxt\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/130692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/users\/624"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/comments?post=130692"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/posts\/130692\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/media\/130693"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/media?parent=130692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/categories?post=130692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ph\/tutorials\/wp-json\/wp\/v2\/tags?post=130692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}