Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Use Two Script Blocks

Vue Tip: Use Two Script Blocks Image
Script

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.

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.

Vue Tip: Speed Up Initial Load Using Async Components

Using async components is a great way to speed up the initial load time of your app.

Vue Tip: Use Optional Chaining in Templates

It's possible to use optional chaining in Vue templates.