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:

Pré-requisitos

• node - Nós recomendamos que você tenha a última versão LTS instalada.
• Um editor de texto, nós recomendamos VS Code com a extensão Vetur ou WebStorm
• Um terminal, nós recomendamos utilizar o terminal integrado do VS Code ou terminal WebStorm .

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 create nuxt-app <project-name>

npx create-nuxt-app <project-name>

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:

cd <project-name>
yarn dev

cd <project-name>
npm run dev

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

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 :

{
  "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 add nuxt

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.

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 :

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

Iniciando o projeto

Inicie o seu projeto executando um dos seguintes comandos abaixo :

yarn dev

npm run dev

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.

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 .