Inicio Rápido ​

Prueba Vue Online ​

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

• Si prefieres una configuración HTML sencilla sin pasos de compilación, puedes utilizar este JSFiddle como punto de partida.

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

Creación de una Aplicación de Vue ​

En esta sección presentaremos cómo crear una Aplicación de una Sola Página (SPA) de Vue en tu máquina local. El proyecto creado utilizará una configuración de compilación basada en Vite y nos permitirá utilizar los Componentes de un Solo Archivo (SFCs) de Vue.

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

$ npm create vue@latest

$ pnpm create vue@latest

$ yarn create vue@latest

$ bun create vue@latest

Este comando instalará y ejecutará create-vue, la herramienta oficial de estructuración de proyectos de Vue. Se te presentarán solicitudes para varias características opcionales como TypeScript y soporte de 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 / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

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

Si no estás seguro de alguna opción, simplemente elige No pulsando enter por ahora. Una vez creado el proyecto, sigue las instrucciones para instalar las dependencias e 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 funcionando. Ten en cuenta que los componentes de ejemplo del proyecto generado están escritos utilizando la Composition API y <script setup>, en lugar de la Options API. He aquí algunos consejos adicionales:

• La configuración de IDE recomendada es Visual Studio Code + la extensión Volar. Si utilizas otros editores, consulta la sección Soporte para IDE.
• En la Guía de Herramientas se discuten más detalles sobre las herramientas, incluyendo la integración con frameworks backend.
• Para obtener más información sobre la herramienta de compilación subyacente Vite, consulta la documentación de Vite.
• Si decides utilizar TypeScript, consulta la guía Usando Vue con 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 compilación de tu aplicación lista para producción en el directorio ./dist del proyecto. Consulta la guía de Implementación de Producción (Deployment) para aprender más sobre cómo enviar tu aplicación a producción.

Siguientes Pasos >

Usando Vue desde un CDN ​

Puedes usar Vue directamente desde un 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.

Cuando se utiliza Vue desde un CDN, no hay ningún "paso de compilación" involucrado. Esto hace que la configuración sea mucho más simple, y es adecuado para mejorar el HTML estático o la integración con un marco 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 alto nivel están expuestas como propiedades en el objeto Vue global. Aquí hay 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 el Módulo de Construcción ES ​

En el resto de la documentación, utilizaremos principalmente la sintaxis de módulos ES. La mayoría de los navegadores modernos soportan ahora módulos ES de forma nativa, por lo que podemos usar Vue desde un CDN a través de módulos ES nativos como este:

<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>

Observa que estamos usando <script type="module">, y que la URL importada del CDN apunta a la compilación de módulos ES de Vue.

Habilitar mapas de importación ​

En el ejemplo anterior, estamos importando desde la URL del 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 Import Maps:

<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('Hello 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 apuntan a la versión de los módulos ES de la biblioteca que pretendes utilizar.

Distribución de los Módulos ​

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

<!-- index.html -->
<div id="app"></div>

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

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

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>El contador está en {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>count is {{ count }}</div>`
}

Si abres el index.html de arriba directamente en tu navegador, verás que arroja un error porque los módulos ES no pueden trabajar sobre el protocolo file://, que es el protocolo que utiliza el navegador cuando abre un archivo local.

Por razones de seguridad, los módulos ES sólo pueden funcionar sobre el protocolo http:// que utilizan los navegadores cuando abren páginas en la web. Para que los módulos ES funcionen en nuestra máquina local, necesitamos servir el index.html sobre el protocolo http://, con un servidor HTTP local.

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

Puede que hayas notado que la plantilla del componente importado está en línea como una cadena JavaScript. Si estás usando VSCode, puedes instalar la extensión es6-string-html y prefijar las cadenas con un comentario /*html*/ para obtener resaltado de la sintaxis para ellas.

Siguientes pasos ​

Si te has saltado la Introducción, te recomendamos encarecidamente que la leas antes de pasar al resto de la documentación.