Javascript is required
·
1 min read

Vue Tip: Use Two Script Blocks

Vue Tip: Use Two Script Blocks  Image

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.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.