script setup en Vue 3 sin export default

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:34

script setup en Vue 3 sin export default

Curso de Vue.js: Componentes y Composition API

Clase 22 de 23

Clase 22 / 23

Recursos

Si trabajas con Vue.js 3 y Single-File Components, script setup es la sintaxis que vas a querer dominar para escribir componentes más limpios, funcionales y cercanos a JavaScript puro. Funciona como un azúcar sintáctico sobre Composition API que elimina el export default, reduce ceremonia y mantiene toda la reactividad del framework.

¿Qué es script setup en Vue 3 y por qué importa?

Cuando agregas el atributo setup al tag <script> de un archivo .vue, todo el código que escribas dentro se comporta como si estuviera dentro de la función setup() del Composition API. Eso significa que ya no necesitas exportar un objeto con props, setup, return y demás propiedades.

La diferencia se nota rápido. Antes tenías un export default con una función setup que recibía props y context, declaraba variables, y al final hacía un return para exponer todo al template. Con script setup, todas las variables, constantes y funciones que declares quedan disponibles automáticamente en el template, sin return explícito.

¿Qué hace el atributo setup en el tag script? Indica al compilador de Vue que el contenido del script debe tratarse como el cuerpo de la función setup() del Composition API, exponiendo automáticamente todas las declaraciones al template.

¿Cómo migrar un componente de Composition API a script setup?

La migración es directa si ya tienes un componente con Composition API tradicional. Estos son los pasos que siguió la clase para reescribir el componente:

Agregar el atributo setup al tag <script>.
Mover todo el contenido de la función setup() al cuerpo del script, excepto el return.
Eliminar el export default por completo.
Reemplazar la declaración de props con la macro defineProps.
Sustituir el uso de expose por la macro defineExpose.

Después de esos cambios, las constantes como btn, username o fullName quedan listas para usarse en el template sin necesidad de retornarlas.

¿Cómo declarar props con defineProps?

En el modelo anterior, los props se definían como propiedad del objeto exportado y llegaban como primer argumento de setup. Con script setup, importas y usas defineProps, que recibe la misma definición que tenías antes y devuelve el objeto de props.

js import { defineProps, toRef, computed } from 'vue'

const props = defineProps({ username: String })

Así mantienes acceso a los valores de forma no reactiva a través de props, y puedes seguir usando toRef cuando necesites reactividad sobre una propiedad específica.

¿Cómo exponer métodos al componente padre con defineExpose?

Cuando quieres que un componente padre acceda a métodos o referencias internas mediante un ref, usas defineExpose en lugar de la propiedad expose del context.

js defineExpose({ focusBtn: () => btn.value.focus() })

Es la misma idea de antes, pero en forma de función. El componente queda más legible y todo el código vive dentro del mismo bloque <script setup>.

¿Puedo usar export default junto con script setup? No. Cuando activas script setup, Vue no permite export default en ese mismo bloque porque generaría un conflicto sobre qué se está exportando.

¿Cuándo conviene usar script setup en tus proyectos Vue?

La sintaxis tiene sentido cuando ya estás usando Single-File Components y un compilador que los procese, como el que viene en proyectos modernos de Vue 3. No funciona en Vanilla.js ni en un proyecto solo con Webpack, salvo que incluyas la librería de compilación de SFC.

Algunas ventajas concretas que viste en la clase:

Menos código repetido: desaparecen export default, setup() y el return.
Estilo funcional puro: el script se lee como JavaScript moderno, no como un objeto de configuración.
Reactividad intacta: ref, computed, watch e inject siguen funcionando igual.
Macros dedicadas: defineProps y defineExpose reemplazan los argumentos clásicos de setup.

Un detalle a tener en cuenta es que, al momento de la grabación, script setup aún figura como sintaxis en pruebas dentro de Vue 3. Es muy probable que se mantenga estable, pero conviene revisar la documentación oficial en vuejs.org para confirmar si hay cambios en el API.

¿Te animas a refactorizar uno de tus componentes a script setup? Cuéntame en los comentarios qué te parece esta sintaxis y si notas la diferencia al leer tu código después de la migración.

Introducción

Options API vs Composition API en Vue 3

Crear y configurar proyectos con Vue CLI

Estructura de archivos en proyectos Vue CLI

Built-in Components

Componentes dinámicos con Vue.js

Componentes asíncronos con defineAsyncComponent

Transiciones con fade en Vue.js

Teleports en Vue 3 para mover modales al DOM

Componentes personalizados

Virtual DOM en Vue.js explicado

Hooks del ciclo de vida en Vue.js

Hooks del ciclo de vida en Vue con ejemplos

Mixins en Vue.js: reutilización con riesgos

Composition API

Composition API: setup en Vue 3

Hooks del ciclo de vida en Vue 3 setup

`ref` y `reactive` en Vue Composition API

Watchers con Composition API en Vue.js

Propiedades computadas con Composition API

Props reactivos con toRefs en Vue.js

El argumento context en Vue 3 setup

provide e inject en Vue Composition API

Template Refs en Vue 3 con Composition API

Composition API vs Options API en Vue.js

script setup en Vue 3 sin export default

Cierre del curso

Qué aprendiste en el curso de Vue.js 3

script setup en Vue 3 sin export default

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos