Nuxt 3 Release Candidate beta já está disponível! Descobre mais sobre isso v3.nuxtjs.org

Translated page Contents of this page might be outdated.

Instalação

Aqui, você vai encontrar informações sobre como configurar e iniciar um projeto Nuxt em 4 passos.


Online playground

Você pode divertir-se com o Nuxt de forma online, diretamente pelo CodeSandbox ou StackBlitz:

Divertir-se no CodeSandbox Divertir-se no StackBlitz

Pré-requisitos

Usando create-nuxt-app

Para iniciar rapidamente, você pode utilizar create-nuxt-app .

Tenha certeza que você possui instalado o yarn, npx (incluido por padrão no npm v5.2+) ou npm (v6.1+).

Yarn
yarn create nuxt-app <project-name>
NPX
npx create-nuxt-app <project-name>
NPM
npm init nuxt-app <project-name>

O terminal irá fazer algumas perguntas (nome, opções do Nuxt, framework de UI, TypeScript, linter, framework de testes, etc). Para encontrar mais detalhes sobre todas essas opções veja a documentação create-nuxt-app .

Uma vez que todas as questões foram respondidas, será instalada todas as dependências. O próximo passo é navegar para a pasta do projeto e inicia-lo:

Yarn
cd <project-name>
yarn dev
NPM
cd <project-name>
npm run dev

A aplicação agora estará rodando em http://localhost:3000 . Parabéns!

Outra forma de iniciar o Nuxt é utilizando CodeSandbox o qual é uma ótima maneira de iniciar rapidamente no Nuxt e/ou compartilhar o seu código com outras pessoas.

Instalação manual

Criar um projeto Nuxt do início vai necessitar apenas de um arquivo e uma pasta.

Nós vamos usar o terminal para criar os diretórios e arquivos, sinta-se livre para criar usando um editor de sua escolha.

Configurando o seu projeto

Crie uma pasta vazia com o nome do seu projeto e navegue para dentro dele :

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

Substitua <project-name> com o nome do seu projeto.

Crie o arquivo package.json :

touch package.json

Preencha o conteúdo do seu package.json com :

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

scripts define os comandos do Nuxt que serão executados com o comando npm run <command> ou yarn <command>.

O que é o arquivo package.json ?

O arquivo package.json é como o documento de identificação do seu projeto. Ele irá conter todas as dependências do projeto e muito mais. Se você não sabe o que é o arquivo package.json, nós recomendamos imensamente a leitura da documentação do npm .

Instalando Nuxt

Uma vez que o package.json foi criado, adicione nuxt no seu projeto via npm or yarn utilizando um dos comandos abaixo:

Yarn
yarn add nuxt
NPM
npm install nuxt

Esse comando vai adicionar nuxt como uma dependência para o seu projeto e vai adiciona-lo no seu package.json. A pasta node_modules também será criada, é aonde todos os seus pacotes instalados e dependencias serão salvas.

Um arquivo yarn.lock ou package-lock.json também será criado, o qual garante consistência e a compatibilidade das dependências instaladas no seu projeto.

Criando a sua primeira página

Nuxt transforma todos arquivos *.vue dentro da pasta pages em rotas para a aplicação.

Crie a pasta pages dentro do seu projeto :

mkdir pages

Então, crie um arquivo index.vue dentro da pasta pages :

touch pages/index.vue

É importante que essa página seja nomeada index.vue dessa forma ela será a página principal que o Nuxt irá mostrar quando a aplicação abrir.

Abra o arquivo index.vue no seu editor e adicione o seguinte conteúdo :

pages/index.vue
<template>
  <h1>Hello world!</h1>
</template>

Iniciando o projeto

Inicie o seu projeto executando um dos seguintes comandos abaixo :

Yarn
yarn dev
NPM
npm run dev
Nós usamos o comando dev quando iniciamos a nossa aplicação no modo de desenvolvimento.

A aplicação está agora rodando em http://localhost:3000 .

Abra no seu navegador clicando no link do seu terminal e você deverá ver o texto "Hello world!" que nós copiamos no passo anterior.

Quando iniciado o Nuxt no modo de desenvolvimento, ele estará escutando por mudanças nos arquivos dentro dos demais diretórios, então não há necessidade de reiniciar a aplicação quando por exemplo adicionar páginas novas.
Quando você rodar o comando dev será criado uma pasta chamada .nuxt. Essa pasta deve ser ignorada pelo controle de versionamento. Você ignorar arquivos criando um arquivo .gitignore na raiz do projeto e adicionando .nuxt ao arquivo.

Passo extra

Crie uma pagina chamada fun.vue dentro da pasta pages.

Adicione um <template></template> e inclua um cabeçalho com uma frase engraçada dentro.

Então, vá até o seu navegador e veja a sua nova página em localhost:3000/fun .

Criar uma pasta more-fun e colocar um arquivo index.vue dentro, irá dar o mesmo resultado que criar um arquivo more-fun.vue.