Issues arise when utilizing the import statement within the context of <script setup>, causing subsequent code to malfunction.
After installing the @heroicons package and importing it as a component in the <template>, all code below the import statements appears to stop working. Here is an example of the 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>
Upon running the provided code, the expected "username" heading is not displayed. Additionally, an ESLint warning occurs:
myName is declared but its value is never read
Remarkably, by commenting out the import statement, the myName ref appears to function properly once more.
Tools and packages used:
- VS Code
- Nuxtjs 3
- Tailwind CSS
- Heroicons package
- PNPM as package manager