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.

1<script>
2// Normal <script> using Options API, executed in module scope (only once)
3runSideEffectOnce()
4
5// Here you can declare additional options
6export default {
7  name: 'MyComponent',
8  inheritAttrs: false,
9  customOptions: {},
10}
11</script>
12
13<script setup>
14// Composition API: executed in setup() scope (for each instance)
15import { ref } from 'vue'
16console.log('Setting up new component instance')
17const count = ref(0)
18</script>

This feature is officially supported and documented.