{"id":7666,"date":"2024-02-07T16:18:45","date_gmt":"2024-02-07T09:18:45","guid":{"rendered":"https:\/\/www.briswell-vn.com\/?p=7666"},"modified":"2024-04-02T13:11:38","modified_gmt":"2024-04-02T06:11:38","slug":"nuxt-the-intuitive-web-framework","status":"publish","type":"post","link":"https:\/\/www.briswell-vn.com\/en\/news\/nuxt-the-intuitive-web-framework\/","title":{"rendered":"Nuxt – The Intuitive Web Framework"},"content":{"rendered":"

<\/p>\n

Introduction<\/span><\/h2>\n

Nuxt is an open-source JavaScript framework based on Vue.js. The latest version is currently Nuxt 3. Nuxt 3 is an upgrade from the Nuxt framework based on Vite, Vue 3, and Nitro with support from Typescript.<\/p>\n

Nuxt simplifies the development of web applications under Server-side rendering (SSR) and Static Site Generation (SSG) methods, in addition to other methods such as CSR, ISR, ESR, and SWR. Nuxt provides a structured and convention-based approach to building Vue.js applications, allowing developers to focus on developing features instead of dealing with complex configurations.<\/p>\n

 <\/p>\n

Why use Nuxt?<\/h2>\n

Server-side Rendering (SSR)<\/span>:<\/strong> Nuxt enables server-side rendering, which means that the Vue.js components are pre-rendered on the server before being sent to the client. This improves initial page load performance and allows for better search engine optimization (SEO), as search engines can index fully rendered content.<\/p>\n

Static Site Generation (SSG)<\/span>:<\/strong> Nuxt can generate static HTML files at build time, which can be served directly from a CDN or static hosting service. This approach eliminates the need for server-side rendering on each request, resulting in faster page loads and improved scalability.<\/p>\n

Faster rendering<\/span>: <\/strong>The Vue Virtual DOM (VDOM) has been rewritten from the ground up, allowing for better rendering performance. On top of that, when working with compiled Single-File Components, the Vue compiler can further optimize them at build time by separating static and dynamic markup. This results in faster first rendering (component creation) and updates, and less memory usage. In Nuxt 3, it enables faster server-side rendering as well.<\/p>\n

Smaller bundle<\/span>:<\/strong> With Vue 3 and Nuxt 3, a focus has been put on bundle size reduction. By implementing the tree-shaking technique, the production environment of the application will exclude Vue’s features such as template directives and components that are not used when bundling. This can help reduce file size,<\/span> download faster, and improve loading time for applications. This way, a minimum Vue 3 application can be reduced to 12 kb gzip compressed.<\/span><\/p>\n

Extensive ecosystem:<\/span><\/strong> Nuxt has a diverse development ecosystem contributed by the community. You can take advantage of community plugins, modules, and tools to extend and customize your application.<\/p>\n

Support Typescript<\/span>:<\/strong> Although Nuxt 2 already supports Typescript, Nuxt 3 has improved Typescript support, you can use Type-checking and other tools that Nuxt provides based on Typescript.<\/p>\n

Simplified development<\/span>:<\/strong> With Convention Over Configuration, Nuxt reduces boilerplate code and simplifies the development process. It comes with built-in features such as routing, code splitting, and state management, enabling you to focus on building your application logic rather than worrying about setup and configuration.<\/p>\n

Better experience <\/b>for developers<\/b><\/span>:<\/strong> Nuxt offers a robust development environment with features like hot module replacement, automatic reloading, error handling, and more innovative tools like debugging, testing, dev tools, and others. These features streamline the development workflow, allowing for faster iterations and better debugging capabilities.<\/p>\n

Scalability and performance<\/span>:<\/strong> Nuxt optimizes your application’s performance through features like automatic code splitting, lazy loading, and pre-rendering. It ensures that only the necessary JavaScript is loaded for each page, resulting in faster load times and a better user experience. Additionally, Nuxt’s modular architecture allows for easy scalability when upgrading your application to higher versions.<\/span><\/p>\n

 <\/p>\n

Some built-in supported technologies<\/h2>\n
    \n
  1. Webpack 5<\/a><\/li>\n
  2. Vite<\/a><\/li>\n
  3. Nitro<\/a><\/li>\n
  4. Vue 3<\/a><\/li>\n
  5. Router 4<\/a><\/li>\n
  6. Typescript<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    Feature comparison<\/h2>\n

    In the table below, there is a quick comparison between 3 versions of Nuxt:<\/p>\n

    \"\"<\/p>\n

     <\/p>\n

    Directory structure<\/h2>\n

    \"\"<\/p>\n

    .nuxt:<\/strong> Nuxt uses the “.nuxt\/”<\/strong> directory during development to create your Vue application.<\/p>\n

    .output:<\/strong> Nuxt creates the “.output\/”<\/strong> directory when building your application for the production environment.<\/span><\/p>\n

    assets:<\/strong> The “assets\/”<\/strong> directory is used to add all the content of the site that the builder (Webpack or Vite) will process. The folder usually contains the following file types: Stylesheets (CSS, SASS, etc.), Fonts, and images will not be served from the “public\/”<\/strong> directory.<\/p>\n

    components:<\/strong> The “components\/”<\/strong> directory is where you put all your Vue components which can then be imported inside your pages or other components.<\/p>\n

    composables:<\/strong> Nuxt 3 uses the “composables\/”<\/strong> directory to automatically import your Vue composables into your application using auto-imports.<\/p>\n

    content:<\/strong> Supports .md, .yml, and .csv files to create a CMS for your application.<\/p>\n

    layouts:<\/strong> Used to change the look and feel of your application. An application can have multiple layouts for example: admin layout, guest layout, and registered clients layout. These layouts will be reused on different pages to handle their appearance (sidebar, menu, footer, etc.). During installation, Nuxt CLI provides default layouts\/default.vue layout and is used on all pages.<\/p>\n

    middleware:<\/strong> Used to handle requests before the page is displayed to the user. Middleware allows you to perform tasks such as authentication, access checking, activity logging, and other custom processing before the page is rendered.<\/p>\n

    modules<\/strong>: Nuxt scans the “modules\/”<\/strong> directory and loads them before starting. It is a good place to place any local modules you develop while building your application.<\/p>\n

    node_modules:<\/strong> The package manager (npm or yarn or pnpm) creates the “node_modules\/”<\/strong> directory to store the dependencies of your project.<\/p>\n

    pages:<\/strong> Nuxt provides file-based routing to create routes in your web application using Vue Router.<\/p>\n

    plugins:<\/strong> Nuxt automatically reads the files in your “plugins”<\/strong> directory and loads them at the creation of the Vue application. You can use the .server or .client suffix in the file name to load a plugin only on the server or client side.<\/p>\n

    public:<\/strong> The “public\/”<\/strong> directory contains static files and provides resources directly to HTTP requests without additional processing logic. For example, you can place image files, font files, robot.txt, favicon.ico, or other static files.<\/span><\/p>\n

    server:<\/strong> Nuxt automatically scans files inside these directories to register API and server handlers with HMR support: ~\/server\/api, ~\/server\/routes, ~\/server\/middleware.<\/p>\n

    utils:<\/strong> Nuxt 3 uses the “utils\/”<\/strong> directory to automatically import helper functions and other utilities throughout your application using auto-imports.<\/p>\n

    .env:<\/strong> Nuxt CLI has built-in dotenv support in development mode and when running nuxi build<\/code> and nuxi generate<\/code>. In addition to any process environment variables, if you have a .env file in your project root directory, it will be automatically loaded at build, dev, and generate time, and any environment variables set there will be accessible within your nuxt.config file and modules.<\/p>\n

    .gitignore:<\/strong> This will list the names of files and folders in the project that you do not want to be parsed every time you manipulate git.<\/p>\n

    .nuxtignore:<\/strong> The .nuxtigore file allows Nuxt to ignore layouts, pages, components, composables, and middleware in the project root directory (rootDir) during the build process. The .nuxtigore file follows the same specifications as the .gitignore and .eslintigore files, where each line is a glob pattern indicating which files should be ignored.<\/p>\n

    app.config.ts:<\/strong> Used to configure and customize the Nuxt application.<\/p>\n

    app.vue:<\/strong> The main component in Nuxt 3 applications.<\/p>\n

    nuxt.config.ts:<\/strong> The nuxt.config.ts file contains your custom Nuxt configuration and allows you to configure your application, these configurations include head title and associated styles and scripts, middlewares, plugins, authentication, modules, and even APIs.<\/p>\n

    package.json:<\/strong> Contains all the dependencies and scripts for your application.<\/p>\n

    tsconfig.json:<\/strong> Nuxt automatically creates a .nuxt\/tsconfig.json file with other reasonable defaults. You just need to create a tsconfig.json file outside of the root and import it from the initialized Nuxt file.<\/p>\n

     <\/p>\n

    Feature<\/h2>\n

    Auto-imports<\/strong><\/h3>\n

    Auto-import is a new feature developed by Nuxt 3 which is quite convenient. All files in components, composables, utils are automatically recognized and just need to name the component, composables, etc. without having to import again. Auto import is enabled by default but can also be turned off in the nuxt.config.ts file as follows:<\/p>\n

    export default defineNuxtConfig({\r\n  imports: {\r\n    autoImport: false\r\n  }\r\n})\r\n<\/pre>\n
     <\/p>\n
    Rendering Modes<\/strong><\/h3>\n
    Nuxt supports different rendering modes, universal rendering, and client-side rendering but also offers hybrid rendering and the possibility to render your application on CDN Edge Servers.<\/p>\n
     <\/p>\n
    Server Engine<\/strong><\/h3>\n
    Nuxt 3 is powered by a new server engine, Nitro<\/span><\/a>.<\/p>\n
      \n
    1. Cross-platform support for Node.js, Browsers, service workers, and more.<\/li>\n
    2. Serverless support out-of-the-box.<\/li>\n
    3. API routes support.<\/li>\n
    4. Automatic code-splitting and async-loaded chunks.<\/li>\n
    5. Hybrid mode for static + serverless sites.<\/li>\n
    6. Development server with hot module reloading.<\/li>\n<\/ol>\n
       <\/p>\n
      Getting started with Nuxt<\/h2>\n
      Prerequisites: <\/span><\/strong>Nodejs version 16.0.0 or later.<\/p>\n
      A simple setup with Nuxt CLI, used with the nuxi command will help you to install and manage all Nuxt components. With npx installed, you can easily create a project with the command below:<\/p>\n
      > npx nuxi init project-name<\/pre>\n
      As an output you will get this.<\/p>\n
      Nuxt project is created with a v3 template. Next steps:\r\n\u203a cd project-name\r\n\u203a Install dependencies with npm install or yarn install or pnpm install\r\n\u203a Start development server with npm run dev or yarn dev or pnpm run dev<\/pre>\n
      Install dependencies.<\/p>\n
      yarn install<\/pre>\n
      And here is the new project structure.<\/p>\n
      \"\"
      \nYou should now be able to start your Nuxt application in development mode.<\/p>\n
      yarn dev -o<\/pre>\n
      Then visit the browser at http:\/\/localhost:3000<\/a>, to see the newly created Nuxt application running.<\/p>\n
      By default, the app .vue file is the core component that acts as the entry point and renders its content for each application route. Is the root component of your Nuxt application and represents the layout and structure that wraps all other components. It usually contains the main layout, navigation, and any global components or logic that need to be shared across multiple pages.<\/p>\n
      Change a bit the content in the app.vue file and see the display.<\/p>\n
      > app.vue\r\n<template>\r\n  <div>\r\n    <h1>Welcome to the homepage<\/h1>\r\n  <div>\r\n<\/template><\/pre>\n
      \"\"<\/p>\n
       <\/p>\n
      Features<\/h2>\n
      Pages<\/span><\/strong><\/h3>\n
      This is where your Application Views and routes will be located. By default, Nuxt uses a file-based routing system, where each .vue file in the “\/pages”<\/strong> directory corresponds to a route.<\/p>\n
      To use pages, create the file pages\/index.vue and add the <NuxtPage \/> component to app.vue (or remove app.vue when you want pages\/index.vue for default entry). Pages are Vue components and can have any valid extension that Nuxt supports (by default, .vue, .js, .jsx, .mjs, .ts, or .tsx). Nuxt will automatically generate routes for every page in your “~\/pages\/”<\/strong> directory.<\/p>\n
      > app.vue (app.vue default entry)\r\n<template>\r\n  <NuxtPage \/>\r\n<\/template>\r\n\r\n--- .vue ---\r\n> pages\/index.vue\r\n<template>\r\n  <p>Home Page<\/p>\r\n<\/template>\r\n\r\n> pages\/about.vue\r\n<template>\r\n  <p>About Page<\/p>\r\n<\/template>\r\n\r\n--- .ts ---\r\n> pages\/index.ts\r\nexport default defineComponent({\r\n  render () {\r\n    return h('h1', 'Home page');\r\n  }\r\n});\r\n\r\n--- .tsx ---\r\nexport default defineComponent({\r\n  render () {\r\n    return <h1>Home page<\/h1>;\r\n  }\r\n});<\/pre>\n
       <\/p>\n
      Layouts<\/strong><\/h3>\n
      Layout plays an important role in determining the overall structure and design of the pages in your application. Layouts in Nuxt represent a reusable template that wraps around your page components and provides a consistent look and feel across multiple pages. Can create many different layouts like login layout or homepage layout or many other layouts.<\/p>\n
      If you only have a single layout in your application, we recommend using app.vue with the <NuxtPage \/> component instead.<\/span><\/em><\/p><\/blockquote>\n
      If nothing is set, Nuxt will specify default .vue as the default.<\/p>\n
      > app.vue\r\n<template>\r\n  <NuxtLayout>\r\n    <NuxtPage \/>\r\n  <\/NuxtLayout>\r\n<\/template>\r\n\r\n> layouts\/default.vue\r\n<template>\r\n  <div>\r\n    <h1>This our default layout<\/h1>\r\n    <slot \/>\r\n  <\/div>\r\n<\/template>\r\n\r\n> pages\/index.vue\r\n<template>\r\n  <p>Home Page<\/p>\r\n<\/template><\/pre>\n
      \"\"<\/p>\n
       <\/p>\n
      Now let’s do something more interesting. Let’s create a custom layout and display our \/About<\/strong> page using our customized layout.<\/p>\n
      > layouts\/custom.vue\r\n<template>\r\n  <div>\r\n    <h1>This our custom layout<\/h1>\r\n    <slot \/>\r\n  <\/div>\r\n<\/template>\r\n\r\n> pages\/about.vue\r\n<template>\r\n  <p>About Page<\/p>\r\n<\/template>\r\n\r\n<script setup>\r\ndefinePageMeta({\r\n  layout: 'custom',\r\n});\r\n<\/script><\/pre>\n
      \"\"<\/p>\n
       <\/p>\n
      Routing<\/strong><\/h3>\n
      Dynamic routes<\/span><\/strong><\/h4>\n
      Now, let’s look at the different ways to create routes using routing based on Nuxt files.<\/p>\n
      \"\"<\/p>\n
       <\/p>\n
      In our example, let’s look at the “pages\/”<\/strong> directory structure. There are two different types of pages: static pages and dynamic pages whose content changes based on route parameters.<\/p>\n
        \n
      1. Static page\n