Go to content
The Codest
  • About Us
  • Services
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
  • Services
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
2022-05-25
Software Development

Nuxt 3 - a Popular Hybrid Vue Framework

Filip Tobiasz

Vue.js Developer

Nuxt 3 - a Popular Hybrid Vue Framework - Image

Nuxt 3 is the next generation of the popular hybrid Vue framework, which allows us to use Vue for building server-side rendered applications. Beta version was launched on 12 October 2021, bringing into Nuxt Vue 3, a new intro engine, a lighter bundle and adhook Vite.

Nuxt 3 has been re-architected and re-written to support ESM and TypeScript natively. It’s currently unstable, which makes it not yet production-ready. The first candidate (nuxt@3.0.0-rc.1) is planned to be released on 7 April 2022.

Nuxt table

source

Starting a new project

Open a terminal or open an integrated terminal from Visual Studio Code and use the following command to create a new starter project:

npx nuxi init nuxt3-app

Open the nuxt3-app folder:

cd nuxt3-app

Install the dependencies:

yarn install

Run the development server:

yarn dev

Build the application:

yarn build

Run the built application:

yarn start

What’s new?

Vue 3 support

Vue 3 came with several new features that make building and maintaining applications a lot faster and easier. The most important changes are made to Global Vue API and Events API. Vue 3also introduces new features like provide / inject, composition API (described below), Fragments, and Teleport.

Composition API

Composition API is a built-in Vue 3 feature, which provides a set of APIs, which allows the use of imported functions instead of declaring options. So, the main advantages of Composition API are better logic reuse, more flexible code organization and great TypeScript integration. All parts of the new API can be used outside of Vue components.

Nuxt 3 provides a new directory - composables/ - that allows to auto-import Vue composables intro application.

Example composable:

// It will be available as useFoo() (camelCase of file name without extension)
export default function () {
  return useState('foo', () => 'bar')
}

Example of using a composable in a Vue component:

<template>
  <div>
    {{ foo }}
  </div>
</template>

<script setup>
const foo = useFoo()
</script>

As you can see above, a composable is exported as useFoo, just as declared in the const name. If there is no export name, the composable will be accessible as pascelCase of the file name. It also allows you to easily integrate auto-imported composables with a popular Vue Store composable called Pina.

API structure example

source

Nitro Engine

Nitro is a full-stack server which uses Rollup and Node.js workers in development to serve code and context isolation. It also includes a server API and server middleware. In production, the engine builds the application and the server into one directory - `.output`. The thing is that output is lightweight: minified and without any node modules. Nitro allows you to deploy the output on Node.js, Serverless, Workers, Edge-side rendering, or as purely static. 

Nuxt 3 provides the possibility to deploy on Azure or Netlify with no configuration required, along with a Firebase or Cloudflare deploy with minimal configuration.

Vite

Vite is a next-generation frontend tooling, which is a built-in feature for Nuxt 3. This tool provides a faster development experience for web projects. For development, the server Vite has rich feature enhancements over native ES modules and a very fast Hot Module Replacement (HMR).

In the building process, Vite bundles code with preconfigured Rollup to optimize static assets for production.

New file structure

file structure example

source

Nuxt 3 introduces a slightly changed file structure. The biggest changes were done to `app.vue` - `pages/` directory is optional and if isn’t present, the application won’t include a vue-router, which is useful when creating a loading page or an application that doesn’t need routing. 

Example app.vue file:

<template>

  <h1>Hello World!</h1>

</template>

To include routing, pages and layout, you need to use built-in components, namely `NuxtPage` and `NuxtLayout`. Example:

<template>

  <div>

    <NuxtLayout>

      <NuxtPage/>

    </NuxtLayout>

  </div>

</template>

`app.vue` is the main component of the Nuxt application, so everything added there will be global and included in every page. 

The change in the Nuxt directory structure involves replacing `store/` with `composables/` directory, since Vue 3introduces composables which replaces stores.

Migrating from Vue 2 to Vue 3 using Nuxt Bridge

Nuxt 3 introduces Nuxt Bridge - forward-compatibility layer that upgrades Nuxt 2 applications with Nuxt 3 features, allowing it to upgrade itself piece by piece. It provides access to features like: Nitro engine, composition API and new CLI, by simply installing and activating the bridge.

Nuxt Bridge is backward compatible, so legacy plugins and modules will still work, while migrating is easy and possible without rewriting the whole application.

To enable Nuxt Bridge, you have to make sure that the dev server isn’t running, then remove any package lock files and install `nuxt-edge`:

\- "nuxt": "^2.15.0"

+ "nuxt-edge": "latest"

After that, reinstall all dependencies:

yarn install

Your migration using Nuxt Bridge is done!

Another way is to install Nuxt Bridge as a development dependency:

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

Then you have to update scripts in `package.json` to take into account changes that the Nitro server brings to the building process.

cooperation banner

Related articles

Startups

3 Common Challenges of Software Product Development for Startups

The startup world can be cruel and exciting at the same time. Although most common challenges can be predicted before starting the process of product development, we often assume that they won’t happen in our case – and this...

Monika Krupa
Technology news

7 Predictions for the IT Industry in 2023

What trends will dominate the IT industry in 2023? These include the outsourcing of IT professionals, the development of cloud-based tools and platforms, the growing popularity of solutions in the spirit of a composable approach...

Greg Polec
Technology news

Cyber Security Dilemmas: Data Leaks

The pre-Christmas rush is in full swing. In search of gifts for their loved ones, people are increasingly willing to “storm” online shops

Jakub Jakubowicz
Software Development

Vue.js app improvement. Some practical tips

Vue is a rapidly growing progressive framework for building user interfaces. It became the JavaScript framework with the most stars on GitHub and the most highly starred project of 2016 and 2017 on in the same portal.

Dominik Grzedzielski

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

Tech company specializing in scaling tech teams for clients and partners thanks to top-class development engineers.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Business Link High5ive, Pawia 9, 31-154 Kraków, Poland
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland
  • Aleja Grunwaldzka 472B, 80-309 Gdańsk, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2022 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.