Instalação

Neste artigo, encontraremos informação sobre como configurar e executar um projeto de Nuxt dentro de 4 passos.

Zona de Testes Virtuais

Podemos brincar com a Nuxt diretamente na CodeSandbox ou na StackBlitz:

Pré-requisitos

• node - recomendamos ter a ou a 16.x ou a 14.x instalada.
• Um editor de texto, recomendamos VS Code com a extensão Volar ou WebStorm
• Um terminal, nós recomendamos utilizar o terminal integrado do VS Code ou terminal WebStorm .

Usar a create-nuxt-app

Para iniciarmos rapidamente, podemos usar a create-nuxt-app .

Precisamos de certificar-nos de que temos instalado as ferramentas, yarn, npx (incluída por padrão com a npm v5.2+) ou npm (v6.1+).

yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

npm init nuxt-app <project-name>

pnpm create nuxt-app <project-name>

O programa fazer-nos-á algumas perguntas (nome, opções da Nuxt, abstração de interface de utilizador, TypeScript, analisador de código, abstração de teste, etc). Para sabermos mais sobre todas as opções, podemos consultar a documentação da create-nuxt-app .

Quando todas as perguntas forem respondidas, esta instalará todas as dependências. O passo seguinte é navegar para a pasta do projeto e iniciá-lo:

cd <project-name>
yarn dev

cd <project-name>
npm run dev

cd <project-name>
pnpm dev

A aplicação está agora a ser executada em http://localhost:3000 . Muito bem!

Instalação Manual

A criação de um projeto de Nuxt a partir do zero requer apenas um ficheiro e um diretório.

Utilizaremos o terminal para criar os diretórios e ficheiros, mas podemos criá-los com o uso do nosso editor de eleição.

Configurar o nosso projeto

Criaremos um diretório vazio com o nome do nosso projeto e navegaremos para ele:

mkdir <project-name>
cd <project-name>

Devemos substituir <project-name> pelo nome do nosso projeto.

Criaremos o ficheiro package.json:

touch package.json

Preencheremos o conteúdo do nosso package.json com:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

scripts definem comandos da Nuxt que serão iniciados com o comando npm run <command> ou yarn <command>.

O que é um ficheiro package.json?

O ficheiro package.json é como o cartão de identificação do nosso projeto. Contém todas as dependências do projeto e muito mais. Se não soubermos o que é o ficheiro package.json, podemos dar uma leitura rápida da documentação da npm .

Instalar a Nuxt

Uma vez que o package.json tenha sido criado, adicionamos a nuxt ao nosso projeto via npm ou yarn como abaixo:

yarn add nuxt

npm install nuxt

pnpm add nuxt --shamefully-hoist

Este comando adicionará a Nuxt como uma dependência ao nosso projeto e adicionar-lo-á ao nosso package.json. O diretório node_modules também será criado, o qual é onde todos os nossos pacotes instalados e dependências serão armazenados.

Criar a nossa primeira página

A Nuxt transforma cada ficheiro *.vue dentro do diretório pages numa rota para a aplicação.

Criamos o diretório pages no nosso projeto:

mkdir pages

Depois, criamos um ficheiro index.vue dentro do diretório pages:

touch pages/index.vue

É importante que esta página se chame index.vue, pois esta será a página inicial padrão que a Nuxt mostrará quando a aplicação abrir.

Abrimos o ficheiro index.vue no nosso editor e adicionamos o seguinte conteúdo:

<template>
  <h1>Hello world!</h1>
</template>

Iniciar o projeto

Executamos o nosso projeto escrevendo um dos seguintes comandos no nosso terminal:

yarn dev

npm run dev

pnpm dev

A aplicação está agora a ser executada em http://localhost:3000 .

Abrimos a aplicação no nosso navegador clicando na hiperligação no nosso terminal e devemos ver o texto “Hello World” que copiámos no passo anterior.

Etapa de Bónus

Criaremos uma página chamada fun.vue no diretório pages.

Adicionaremos um <template></template> e incluímos um cabeçalho com uma frase engraçada no interior.

Depois, iremos ao nosso navegador e veremos a nova página em localhost:3000/fun .