Nuxt 3 is a powerful open source framework that makes Web development easier. The Nuxt 3 architecture was redesigned with a smaller kernel for faster performance and a more developer-friendly experience.

Nuxt 3 is lightweight and fast and uses Composition API to make code reusable. It supports Webpack5 and Vite packaging, which means our packages can be built faster and smaller in production environments using Webpack. The development environment uses Vite, which is perfect. Nuxt 3 was developed using Vue3 and TypeScript.

Prior to the start

Make sure you have the following recommended programs installed before you start using them

  • Node.js
  • Visual Studio Code
  • Volar (VSCode plug-in)

If you already have Node.js installed, check whether the version is V14 or V16 using Node — Version.

Note: Nuxt 3 is still in beta,It is not recommended to be used in production environments

Create a project

You can also play it online directly from the SandBox.

Creating a new project

Enter the following command in Terminal to create a project for Nuxt 3

npx nuxi init <project-name>
Copy the code

Once the project has been created, go to the file

cd <project-name>
Copy the code

Install dependencies

yarn
Copy the code

Start the project

yarn dev -o
Copy the code

Next you go to the project and it opens in your browser and you see the following page, and the project is up and running.

Open the project with VSCode and view the folder as follows:

app.vue

The app.vue file is our development entry component, and any JS and CSS we write in this file are global.

// app.vue
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>
Copy the code

The content we see on the page is the component

.

In Nuxt 3 we can create a Pages folder for routing configuration. Nuxt also does not contain vue-Router dependencies if we do not use the Pages folder.

If we create the Pages folder, we can do the routing output through the

component.

// app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>
Copy the code

Because Nuxt uses Suspense> in

, it is recommended to wrap a single root element around it

Pages (Directions)

Vue-router and Pages directory maps are automatically integrated into the application’s routing in Nuxt. This also means that we simply add the

component to app.vue and write the routing file in the Pages directory. Nuxt automatically generates the vue-Router configuration based on the structure in pages and adds it to the application. Let’s give it a try!

  1. app.vueFile added under the root element<NuxtPage />
  2. createpagesFolder and add two routing pages

Vue as our home page, page1. Vue and page2.vue as /page1 and /page2 route display page respectively.

│ ├─ Vue │ ├─ Vue │ ├─ Vue │ ├─ Vue │ ├─ Vue │ ├─ Vue │ ├─ Vue │ ├─ Vue │ ├─ Vue │ ├─ ├─ garbage ├─ page2Copy the code

Enter these three addresses separately in the address bar to see the corresponding file page respectively.

Embedded routines by

Nesting by actually very simple, just need to create routing file in Pages to create folder wrapped file, such as

Pages /page1/test.vue represents the /page1/test path.

Routing navigation

In Nuxt, route skipping is similar to using

for page skipping in a VUE project. The attribute to=”” is used to jump to a route. The difference is that Nuxt uses

.

// app.vue <template> <div> <NuxtLink to="/page1" >to page1</NuxtLink> <hr /> <NuxtLink to="/page2" >to page2</NuxtLink>  <NuxtPage /> </div> </template>Copy the code

Summary: This section briefly introduces Nuxt features, how to download and install, some features of app.vue, and how to configure routes, nested routes and route switching.

Tomorrow we will supplement the routing section, including dynamic routing, routing parameters and so on.