it seems that when I’m using the import statement in the <script setup> all code below it stops working.
I installed the @heroicons package and use the import statement to use it as a component in my <template>. But everything below the import statements does not work anymore. My code:
<template>
<HomeIcon class="w-5 h-5">
<h1>{{myName}}</h1>
</template>
<script setup>
import {HomeIcon} from '@heroicons/vue/24/outline'
const myName = ref('username')
</script>
When running the code above I do not see “username” as a heading as specified in my code. I also see a eslint warning “myName is declared but it’s value is never read”. The moment I comment the import statement, the myName ref seems to work again.
What I use:
- VS Code
- Nuxtjs 3
- Tailwind CSS
- Heroicons package
- PNPM as package manager