improve loader organization syntax with script setup

[Hebilicious]

In the organization section of the docs, we can see the following pattern :

<script lang="ts">
import { useProjectIssues } from '@/loaders/issues'
import { useProjectPullRequests } from '@/loaders/pull-requests'
export { useProjectIssues, useProjectPullRequests }
</script>

<script setup lang="ts">
const { data: issues } = useProjectIssues()
const { data: pullRequests } = useProjectPullRequests()
</script>

This is not the most ergonomic, so it would be neat if we could support this as well, and make it the default syntax :

<script setup lang="ts">
import { useProjectIssues } from '@/loaders/issues'
import { useProjectPullRequests } from '@/loaders/pull-requests'

const { data: issues } = useProjectIssues()
const { data: pullRequests } = useProjectPullRequests()
</script>

There might be multiple ways to make this work,ie it could be similar to vue-macros, where it would compile to the first snippet.

For people who like and use auto-import, that means that this would work too. :

<script setup lang="ts">
const { data: issues } = useProjectIssues()
const { data: pullRequests } = useProjectPullRequests()
</script>

Regarding non-page components, the more natural syntax of importing from a dedicated loader directory would work.

<script setup lang="ts">
import { useProjectIssues } from '@/loaders/issues'

const { data: issues } = useProjectIssues()
</script>

While this is hiding some of the complexity, it makes writing the code more natural.

What do you think ?

[posva]

This should already work with the experimental autoExportsDataLoaders:

    VueRouter({
      extensions: ['.page.vue', '.vue'],
      importMode: 'async',
      logs: false,
      // getRouteName: getPascalCaseRouteName,
      experimental: {
        autoExportsDataLoaders: ['src/loaders/**/*', '@/loaders/**/*'],
        paramParsers: false,
      },
	})

Let me know if it works well or not for you!

---

For non page components, you don't need to export, so it should be already working though

[Hebilicious]

Amazing !