Inicio Rápido ​

Prueba Vue Online ​

• Para probar Vue rápidamente, puedes hacerlo directamente en nuestro Playground.

• Si prefieres una configuración HTML simple sin pasos de construcción, puedes usar este JSFiddle como punto de partida.

• Si ya estás familiarizado con Node.js y el concepto de las herramientas de construcción, también puedes probar una configuración de construcción completa directamente en tu navegador en StackBlitz.

• Para obtener un recorrido por la configuración recomendada, mira este tutorial interactivo de Scrimba que te muestra cómo ejecutar, editar y desplegar tu primera aplicación Vue.

Creando una Aplicación Vue ​

En esta sección, presentaremos cómo generar la estructura de una Aplicación de Página Única de Vue en tu máquina local. El proyecto creado utilizará una configuración de construcción basada en Vite y nos permitirá usar los Componentes de un Solo Archivo (SFCs) de Vue.

Asegúrate de tener una versión actualizada de Node.js instalada y que tu directorio de trabajo actual sea aquel donde deseas crear un proyecto. Ejecuta el siguiente comando en tu línea de comandos (sin el signo $):

$ npm create vue@latest

$ pnpm create vue@latest

# For Yarn (v1+)
$ yarn create vue

# For Yarn Modern (v2+)
$ yarn create vue@latest

# For Yarn ^v4.11
$ yarn dlx create-vue@latest

$ bun create vue@latest

Este comando instalará y ejecutará create-vue, la herramienta oficial de andamiaje de proyectos de Vue. Se te presentarán indicaciones para varias características opcionales como TypeScript y soporte para pruebas:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Si no estás seguro de una opción, simplemente elige No pulsando enter por ahora. Una vez que el proyecto esté creado, sigue las instrucciones para instalar las dependencias y iniciar el servidor de desarrollo:

$ cd <your-project-name>
$ npm install
$ npm run dev

$ cd <your-project-name>
$ pnpm install
$ pnpm run dev

$ cd <your-project-name>
$ yarn
$ yarn dev

$ cd <your-project-name>
$ bun install
$ bun run dev

¡Ahora deberías tener tu primer proyecto Vue en ejecución! Ten en cuenta que los componentes de ejemplo en el proyecto generado están escritos usando la Composition API y <script setup>, en lugar de la Options API. Aquí tienes algunos consejos adicionales:

• La configuración de IDE recomendada es Visual Studio Code + Vue - Official extension. Si utilizas otros editores, consulta la sección de soporte de IDE.
• Más detalles sobre las herramientas, incluida la integración con frameworks de backend, se discuten en la guía de Herramientas.
• Para aprender más sobre la herramienta de construcción subyacente Vite, consulta la documentación de Vite.
• Si eliges usar TypeScript, consulta la Guía de Uso de TypeScript.

Cuando estés listo para enviar tu aplicación a producción, ejecuta lo siguiente:

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

Esto creará una versión lista para producción de tu aplicación en el directorio ./dist del proyecto. Consulta la Guía de Despliegue en Producción para aprender más sobre cómo enviar tu aplicación a producción.

Siguientes Pasos >

Usando Vue desde CDN ​

Puedes usar Vue directamente desde una CDN a través de una etiqueta script:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Aquí estamos usando unpkg, pero también puedes usar cualquier CDN que sirva paquetes npm, por ejemplo jsdelivr o cdnjs. Por supuesto, también puedes descargar este archivo y servirlo tú mismo.

Al usar Vue desde una CDN, no hay ningún "paso de construcción" involucrado. Esto simplifica mucho la configuración y es adecuado para mejorar HTML estático o integrarse con un framework de backend. Sin embargo, no podrás usar la sintaxis de Componentes de un Solo Archivo (SFC).

Usando la Compilación Global ​

El enlace anterior carga la compilación global de Vue, donde todas las APIs de nivel superior se exponen como propiedades en el objeto global Vue. Aquí tienes un ejemplo completo usando la compilación global:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: '¡Hola Vue!'
      }
    }
  }).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('¡Hola Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Usando la Compilación de Módulos ES ​

A lo largo del resto de la documentación, usaremos principalmente la sintaxis de módulos ES. La mayoría de los navegadores modernos ahora soportan módulos ES de forma nativa, por lo que podemos usar Vue desde una CDN a través de módulos ES nativos de esta manera:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: '¡Hola Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('¡Hola Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Ten en cuenta que estamos usando <script type="module">, y la URL de CDN importada apunta a la compilación de módulos ES de Vue en su lugar.

Habilitando los Mapas de Importación ​

En el ejemplo anterior, estamos importando desde la URL completa de la CDN, pero en el resto de la documentación verás código como este:

import { createApp } from 'vue'

Podemos enseñarle al navegador dónde localizar la importación de vue usando Mapas de Importación:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: '¡Hola Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('¡Hola Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

También puedes añadir entradas para otras dependencias al mapa de importación, pero asegúrate de que apunten a la versión de módulos ES de la librería que pretendes usar.

Dividiendo los Módulos ​

A medida que profundizamos en la guía, es posible que necesitemos dividir nuestro código en archivos JavaScript separados para que sean más fáciles de gestionar. Por ejemplo:

<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

export default {
  data() {
    return { count: 0 }
  },
  template: `<div>La Cuenta es: {{ count }}</div>`
}

import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>La Cuenta es: {{ count }}</div>`
}

Si abres directamente el index.html anterior en tu navegador, verás que arroja un error porque los módulos ES no pueden funcionar a través del protocolo file://, que es el protocolo que el navegador usa cuando abres un archivo local.

Por razones de seguridad, los módulos ES solo pueden funcionar a través del protocolo http://, que es lo que los navegadores usan al abrir páginas web. Para que los módulos ES funcionen en nuestra máquina local, necesitamos servir el index.html a través del protocolo http://, con un servidor HTTP local.

Para iniciar un servidor HTTP local, primero asegúrate de tener Node.js instalado, luego ejecuta npx serve desde la línea de comandos en el mismo directorio donde se encuentra tu archivo HTML. También puedes usar cualquier otro servidor HTTP que pueda servir archivos estáticos con los tipos MIME correctos.

Puede que hayas notado que el template del componente importado se incluye directamente como una cadena de JavaScript. Si estás usando VS Code, puedes instalar la extensión es6-string-html y prefijar las cadenas con un comentario /*html*/ para obtener resaltado de sintaxis para ellas.

Siguientes Pasos ​

Si te saltaste la Introducción, te recomendamos encarecidamente leerla antes de pasar al resto de la documentación.