Example Project from A First Look at Nuxt 3
Nuxt is a Vue metaframework that aims to make web development intuitive and performant while keeping great developer experience in mind. The original version, created by Sébastien Chopin in October 2016, was built to emulate the features of Next.js (such as file-system based routing, server-side rendering, and API routes) but with Vue instead of React. Version 3 has been over a year in the making.
git clone https://github.com/ajcwebdev/a-first-look.git
cd frontend/nuxt3npm i
npm run devyarn
yarn devpnpm i --shamefully-hoist
pnpm devOpen localhost:3000 to see your application.
The nuxi build command builds your Nuxt application for production. It creates a .output directory with your application, server, and dependencies ready to be deployed.
npm run build
yarn build
pnpm build<!-- app.vue -->
<template>
<div>
<NuxtPage />
</div>
</template>The pages/ directory is optional, meaning that if you only use app.vue, vue-router won't be included, reducing your application bundle size. However, if you do include it, Nuxt will automatically integrate Vue Router and map pages/ directory into the routes of your application.
<!-- pages/index.vue -->
<template>
<div>
<h2>ajcwebdev-nuxt3</h2>
</div>
</template><!-- pages/about.vue -->
<template>
<div>
<h2>This page tells you stuff about things!</h2>
</div>
</template>Open localhost:3000/about.
The server/ directory contains API endpoints and server middleware for your project. It is used to create any backend logic for your Nuxt application. Nuxt will automatically read in any files in the ~/server/api directory to create API endpoints. Each file should export a default function that handles API requests.
// server/api/index.ts
export default () => (`
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A minimal HTML website served on a Nuxt API route.">
<title>Nuxt 3 API Route</title>
</head>
<body>
<header>
<h2>Hello from Nuxt 3</h2>
</header>
<footer>ajcwebdev '22</footer>
</body>
</html>
`)Open localhost:3000/api.
Push your project to a GitHub repository and link it to Netlify. The build commands will be automatically imported from netlify.toml.
# netlify.toml
[build]
command = "nuxi build"
publish = "dist"
functions = ".output/server"
[[redirects]]
from = "/*"
to = "/.netlify/functions/index"
status = 200npx vercel
yarn vercel
pnpm vercel