Vue Tip: Use Two Script Blocks

If you are using the new <script setup> syntax, you may run into a case where you need some Options API functionality. In this case, adding an additional <script> block to your component is possible. Vue will mix the two together for you, so the Composition API and Options API codes can remain separate.

You may need a regular <script> block in these cases:

• Use the Options API to declare options that cannot be expressed in <script setup>, for example, inheritAttrs or custom options enabled via plugins.
• Run side effects or create objects that should only execute once because setup() is run for every component.
• Declare named exports which allow exporting multiple things from one file.

<script>
// Normal <script> using Options API, executed in module scope (only once)
runSideEffectOnce()

// Here you can declare additional options
export default {
  name: 'MyComponent',
  inheritAttrs: false,
  customOptions: {},
}
</script>

<script setup>
// Composition API: executed in setup() scope (for each instance)
import { ref } from 'vue'
console.log('Setting up new component instance')
const count = ref(0)
</script>

This feature is officially supported and documented.