definePage alternative: <script lang="ts" route>

[minht11]

From my limited experience with unplugin-vue-router definePage seems bit cumbersome to use, because of its limitations with variables. Worse than that it's limitations aren't clear at first glance to developers, typescript/eslint doesn't know about it either. There is no way to import things to it. The SFC route block partially solves readability issues for static values.

So my propolsal is that instead route definition would be defined in separate script tag with keyword route.
It is similar to setup, so it seems familiar, also you can import things to it, declare variables and so on.
Something like this:

<script lang="ts" route>
import ExternalName from 'some-external-module'

definePage({
  name: ExternalName,
})
</script>

Challenges

• The actual names are up for debate. Other names could be scope="definePage", macroorcontext`.
• As far as I know there isn't something similiar in Vue for scripts and might need core support?
• I am not sure how challenging it would be to make other tooling understand that this is completely different scope and that for example imports from <script lang="ts" /> are different from <script lang="ts" route>.

[posva]

What were you trying to do? Why would you import a name from an external module? I'm still looking for usecases to allow arbitrary script to export the route block

I do like the idea of allowing a script, I did some experiments to allow a lang="ts" in the <route> block instead which I think would be a bit better than having 3 different script 😆 .

In practice though, I would like to minimize the need for it. So most things should be doable with the usual definePage()

[posva]

Importing external properties is now allowed in definePage()