vue-comp-to-setup

Vue Composition API to setup (AST)

Demo

vue-comp-to-setup is a command-line tool designed to convert Vue files written using the Composition API into the more modern Script Setup syntax. This tool automates the transformation process, making your code cleaner, easier to maintain, and aligned with the latest Vue.js best practices.

Features

• Convert Composition API-based Vue files to Script Setup syntax
• Handles both single files and entire directories
• Automatically updates defineProps, defineEmits, and defineOptions.
• Cleans up imports and adjusts the structure of your components.
• Convert props to style: options like, with defaults, reactivity

Supported features

• defineOptions

  • Extract component name
  • Extract custom attributes (...i18n, inheritAttrs, ...customOptions)

• defineProps

  • Add const if necessary (const props = defineProps({...}))
  • Convert with type declaration (const props = withDefaults(defineProps<{...}>(), {...}))
  • Support props reactivity (const {...} = defineProps<{...}>())
  • Support props options like (const props = defineProps({...}))

• defineEmits

  • Add const if necessary (const emit = defineEmits([...]))
  • Find emits if used in a setup function

• defineExpose

• useAttrs from setup(_, { attrs })

• useSlots from setup(_, { slots })

• useRuntimeConfig from setup(_, { runtimeConfig })

• Extract components

<script lang="ts">
  import { defineAsyncComponent } from 'vue';
  export default {
    components: {
      AsyncHelloWorld: defineAsyncComponent(() => import('./hello-world.vue'))
    }
  }
</script>

<script setup lang="ts">
  import { defineAsyncComponent } from 'vue';
	
  const AsyncHelloWorld = defineAsyncComponent(() => import('./hello-world.vue'));
</script>

• Extract from return statement

<script lang="ts">
  export default {
    setup() {
      return {
        checked: () => {}
      }
    }
  }
</script>

<script setup lang="ts">
  const checked = () => {}
</script>

Requirements

• Node.js > 18
• Valid Vue file written in Typescript (.vue extension)

Usage

The vue-comp-to-setup project has CLI

Install locally or global

# npm
npm i vue-comp-to-setup

CLI

Convert a Single File

To convert a single .vue file, run:

# npm
# convert single vue file
npx vue-comp-to-setup single [cliOptions] <vue file path>

Options

-v, --view             Preview changes in the editor.
-h, --help             Help for vue-comp-to-setup

Example:

# npm
# convert single vue file
npx vue-comp-to-setup single "src/components/HelloWorld.vue"

Example output

✔ Successfully converted file: src/components/HelloWorld.vue

Convert All Files in a Directory

To convert all .vue files in a specified directory, run:

# npm
# convert folder
npx vue-comp-to-setup folder <folder dir path>

How It Works

Browser: Vue code -> Parser (SFC) -> @babel/parse AST -> Script Setup transform (@babel/traverse) -> Generate @babel/generator -> Format with Prettier standalone

CLI: Read file -> Vue code -> Parser (SFC) -> @babel/parse AST -> Script Setup transform (@babel/traverse) -> Generate @babel/generator -> Format with Prettier standalone -> Format with Prettier API -> Write file

The tool performs the following steps:

1.	Parse Vue Files: Reads the content of the Vue files and parse to AST with Babel.
2.	Convert to Script Setup: Extracts props, emits, and options (like component name and i18n) and converts them into Script Setup syntax (defineProps, defineEmits, defineOptions).
3.	Clean Up Imports: Removes unnecessary imports such as defineComponent and adjusts the remaining imports as needed.
4.	Rewrite Setup Content: Extracts the content inside the setup function and refactors it according to Script Setup syntax, removing return statements.
5.	Code Formatting: Automatically formats the converted code using Prettier.

Useful Links

• https://lihautan.com/babel-ast-explorer/

License

This project is licensed under the MIT License. See the LICENSE file for details.

This README provides a comprehensive overview of your project, explaining how to install, use, and understand its functionality. You can customize the repository link and other specifics as needed.