Import statements breaks script setup Nuxtjs 3-CodePudding

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 >
    <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

CodePudding user response：

Vue components in nuxt must only have one root element if you want to use them inside pages, else page transitions wont work. See here. You have two. The <HomeIcon />and <h1>{{myName}}</h1>. What I think happens is, that when you comment out the import statement, the <HomeIcon /> element doesn't exists and therefore nuxt sees the component with only one root element and can render it.

Try this code:

<template>
  <div>
    <HomeIcon  />
    <h1>{{ myName }}</h1>
  </div>
</template>

<script setup>
  import { HomeIcon } from "@heroicons/vue/24/outline";

  const myName = ref("username");
</script>

Also check out this codesanbox for reproduction.

CodePudding user response：

What seems to work is by extracting the import statement in a different <script> and also exporting it as a component. I now have 2 <script> tags; one with 'setup' attribute and one without.

My final code:

<template>
    <HomeIcon  />
    <h1>{{ myName }}</h1>
</template>

<script>
import { HomeIcon } from '@heroicons/vue/24/outline';

export default {
    components: {
        HomeIcon,
    },
};
</script>

<script setup>
const myName = ref('username');
</script>

But even though everything looks to be working fine in the <script setup>, it seems that my linter plugin still doesn't recognize that I do use the declared variable (see img1). img1

List of plugins I use:

ESLint
Javascript (ES6) code snippets
Prettier
Vetur
Vue Language Features (Volar)