Values in vue templates don't trigger auto-import
josh-hemphill opened this issue · comments
If looking at the template itself isn't a good idea, perhaps some dev-facing comment directives or config options to set more limited matching for specific use cases could be helpful.
To give an example. I can do the following, but I have to add the variable names to something in the script block for it to work, which kind of defeats the purpose.
AutoImport({
imports: [
'vue',
{
'@mdi/js': Object.keys(await import('@mdi/js')).filter(v=>v.startsWith('mdi')),
}
],
}),
<script setup lang="ts">
// Ideally I wouldn't end up with having to write out import statements with 12+ different variables
// but to get them to auto-import, I've got to do something like this:
const i = {mdiInformationOutline}
// And I can't just do `import * as i from '@mdi/js'` because then it doesn't get tree shook, and I end up with 2MB+ file
</script>
<template>
<main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
<div>
<p class="text-4xl">
<v-icon :icon="i.mdiInformationOutline" class="inline-block" />
</p>
</div>
<router-view />
</main>
</template>
A bit unrelated, but how about giving a try to https://github.com/antfu/unocss/tree/main/packages/preset-icons ? 👀
A bit unrelated, but how about giving a try to https://github.com/antfu/unocss/tree/main/packages/preset-icons ? 👀
Sorry, I should have clarified, I'm importing SVG paths (not SVGs themselves) and passing it onto Vuetify icon components so that the icons inherit their properties from the Vuetify instance. I don't think unocss preset-icons would work for that.
If you have any suggestions for being able to treeshake unused properties of a global value, that would also be a means to accomplish what I'm trying to do. I'm using vite-ssg, so most of these icon paths get inlined anyways, so having the whole of @mdi/js
added to the bundle is really frustrating.
Would adding the ability to detect variables within templates be in scope for this project?
Perhaps the way to go would be to add another set of resolver/preset options (disabled by default for compatibility) that can provide the regexes for framework specific template variable detection? Looking at the code everything looks pretty straight forward, I'd be happy to open a PR.
Shipped in v0.8.0
I am trying to achieve the same goal.
What kind of autoImport config do you have?
@josh-hemphill
It's listed in the Readme.md, just set vueTemplate
to true
.
link to line where it's specified
You're missing the await
before the import()
Thanks.