using script setup and script src, show: <script> cannot use the "src" attribute when <script setup> is also present because they must be processed together.

[bigiCrab]

Two script block like this will work:

<script setup>
import { ref } from 'vue';
const msg = ref('from setup');
</script>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    const msg2 = ref('from script data');
    return {
      msg2,
    };
  },
});
</script>

<template>
  <h1>{{ msg }}</h1>
  <h1>{{ msg2 }}</h1>
  <h1>{{ msg3 }}</h1>
</template>

but when separate the script to src it will show <script> cannot use the "src" attribute when <script setup> is also present because they must be processed together.

<script setup>
import { ref } from 'vue';
const msg = ref('Hello World!');
</script>
<script src="./ext.js"></script>

<template>
  <h1>{{ msg }}</h1>
  <h1>{{ msg2 }}</h1>
</template>

I want to use nuxt definePageMeta and follow team convension to use <script src>, is there a way to do this?

Thanks for the help. 🙏

repoduction: https://stackblitz.com/edit/vitejs-vite-rzebjn3m?file=src%2FApp.vue