# Move a Vue 2 component to script setup

> data() becomes ref. Methods become functions. An Inertia page still receives props. It does not gain Vue Router.

- URL: https://laravel-vuejs.space/vue-2-options-to-script-setup
- Author: Anass Ez-zouaine (https://laravel-vuejs.space/author/anass-ez-zouaine)
- Published: 2026-10-11
- Topics: Laravel, VueJs, TypeScript

People searching “Vue 2 options API to script setup” paste a Vue 2 component into an Inertia page and keep `export default`. The Vue starter kit pages are `<script setup lang="ts">`. The [TypeScript guide](https://laravel-vuejs.space/typescript-laravel-vue-pages) is the prop type. This page is the move.

> **TL;DR**
>
> -   data() becomes ref.
> -   Methods become functions.
> -   An Inertia page still receives props.
> -   It does not gain Vue Router.
>
> **Who it's for:** Laravel + Vue developers
>
> **Applies to:** Laravel 13 · Vue 3 · TypeScript

## The fix

```vue
<script setup lang="ts">
import { ref } from "vue";

defineProps<{ title: string }>();

const open = ref(false);

function toggle() {
  open.value = !open.value;
}
</script>

<template>
  <button type="button" @click="toggle">{{ title }}</button>
</template>
```

`data()` becomes `ref`. You need `.value` in the script and you do not need it in the template. `props` from the controller replace `this.$page` reads you used to do in `created()`. Use `usePage()` when you need a shared prop.

## What to avoid

> **Gotcha**
>
> Do not install Vue Router while you convert a component. Inertia still navigates. The [stack guide](https://laravel-vuejs.space/laravel-vue-in-2026) is why a second router stays off this kit. Do not keep `new Vue()` in `app.ts`. The kit already calls `createInertiaApp`.

## FAQ

**Q: How do I move a Vue 2 component to script setup?**

data() becomes ref. Methods become functions. An Inertia page still receives props. It does not gain Vue Router.

**Q: What goes wrong with Vue 2 options API to script setup?**

Many developers paste a Vue 2 component into an Inertia page and keep `export default`. Do not install Vue Router while you convert a component.