Incorporating imports disrupts the script configuration in Nuxtjs 3

Question

Incorporating imports disrupts the script configuration in Nuxtjs 3

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

javascript vue.js nuxt.js vuejs3 nuxtjs3

Answer 1

Answer №1

I have resolved several issues and will be incorporating your code changes into our changelog:

<HomeIcon> was not closed, it should be <HomeIcon />
The vue dependency was missing in @heroicons
PNPM needed to be hoisted shamefully for proper functionality
A clean reinstallation of node_modules + pnpm-lock.yaml was necessary

You can view the Pull Request with the fixes here: https://github.com/flackokj/nuxt-issues/pull/1/files

Answer 2

I have resolved several issues and will be incorporating your code changes into our changelog:

<HomeIcon> was not closed, it should be <HomeIcon />
The vue dependency was missing in @heroicons
PNPM needed to be hoisted shamefully for proper functionality
A clean reinstallation of node_modules + pnpm-lock.yaml was necessary

You can view the Pull Request with the fixes here: https://github.com/flackokj/nuxt-issues/pull/1/files

Answer 3

Answer №2

To improve efficiency, I have separated the import statement into a distinct <script> tag and exported it as a component. Now, my code consists of two <script> tags, one with the 'setup' attribute and one without.

Here is my final code:

<template>
    <HomeIcon class="w-5 h-5" />
    <h1>{{ myName }}</h1>
</template>

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

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

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

Despite the functionality appearing to be correct within the <script setup>, my linter plugin does not seem to recognize that the declared variable is being utilized (refer to img1). img1

Here are some of the plugins I am utilizing:

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

Answer 4

To improve efficiency, I have separated the import statement into a distinct <script> tag and exported it as a component. Now, my code consists of two <script> tags, one with the 'setup' attribute and one without.

Here is my final code:

<template>
    <HomeIcon class="w-5 h-5" />
    <h1>{{ myName }}</h1>
</template>

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

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

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

Despite the functionality appearing to be correct within the <script setup>, my linter plugin does not seem to recognize that the declared variable is being utilized (refer to img1). img1

Here are some of the plugins I am utilizing:

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

Incorporating imports disrupts the script configuration in Nuxtjs 3

Answer №1

Answer №2

Similar questions

How to modify a value in a document within a MongoDB collection

What exactly does the term "entry point" refer to within the context of npm init?

Creating an object that tracks the frequency of each element from another object using JavaScript

What could be the reason for the scope being empty in my AngularJS application?

Transform uploaded image file into a blob format and store it in a VueJS database

Is the return value a result of destructuring?

Dealing with shared content in your Capacitor Android application may require some specific steps

Issues arise when using res.send() with ExpressJS and Mongoose

Encountering an Issue when Registering New Users in Database using Next.js, Prisma, and Heroku

Exploring Ways to Navigate to a Component Two Steps Back in Angular

When using the require() function in Node.js, the period "." is not being recognized as part of the command and

How to Upload Your Avatar Image with the Stream-Chat API from GetStream.io

Organizing shared components into a dedicated repository

Encountering a TypeScript error when using Redux dispatch action, specifically stating `Property does not exist on type`

Tips for defining a dynamic class variable in React with Flow

The background image fails to display properly on the server in Next.js

Creating an overlay with CSS hover on a separate element and the ::before pseudo class

Struggling to retrieve the JSON information, but encountering no success

conditional rendering in a cascading sheet

When a model.find is passed as an argument to be invoked, it results in an error