inlineStyles don't work! script lang="ts"

[pmaiko]

Environment

❯ npx nuxi info
[15:27:51] Working directory: /home/projects/aonikwpkw.github
[15:27:51] Nuxt project info:

---

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.1
• CLI Version: 3.11.1
• Nitro Version: 2.9.5
• Package Manager: npm@10.2.3
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

[15:27:51] 👉 Report an issue: https://github.com/nuxt/nuxt/issues/new

👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new

👉 Read documentation: https://nuxt.com

Reproduction

Create file app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Create file pages/home.vue

<template>
  <div>
    <My></My>  
  </div>
</template>
<script setup lang="ts">
import My from '../my.vue'
</script>

Create file my.vue

<template>
  <section class="my">
    my
  </section>
</template>
<script setup lang="ts">
 console.log('my')
</script>
<style>
.my {
  display: flex;
}
</style>

yarn build
yarn start

Describe the bug

with lang="ts" - no style tag

without lang="ts" - has style tag

Additional context

No response

Logs

No response

[MustafaM257]

Hi @pmaiko ,

I've tried running it exactly as you described, both with and without lang="ts" in the script setup, and everything seems to be working perfectly fine on my end.

As for your next steps, I strongly recommend taking advantage of auto imports by organizing your components inside a components directory. This not only helps with keeping your project well-structured but also ensures that your components are auto-imported everywhere they're needed, which can significantly facilitate your development.

As for the code, it's identical to yours as well, except I moved my.vue into components dir and it's auto imported in home page

If you need any further assistance or have any other questions, feel free to ask!

[pmaiko]

@MustafaM257 I don't understand how this could work for you! I opened examples for the purity of the experiment
https://nuxt.com/docs/examples/hello-world

create file my.vue in components

app.vue

home.vue

my.vue

on your recommendation, I use auto-imported and i see this bug

On my local machine, I see this bug too. Please help me.

[MustafaM257]

@pmaiko could you please upload a repo of the exact code, that's weird! it's not what showing on my end.
ping me when done

[pmaiko]

@MustafaM257 https://github.com/pmaiko/nuxt3-test

https://stackblitz.com/~/github.com/pmaiko/nuxt3-test

commands
npm run build
npm run start

node v20.10.0
npm 10.2.3

[JCtapuk]

this is how you add the style to the global one. Try to write <style scoped>

[pmaiko]

@JCtapuk I know that. if I add scoped or module then it will work correctly. but I just want <style>

[vaheqelyan]

@JCtapuk I know that. if I add scoped or module then it will work correctly. but I just want <style>

I'm experiencing the exact same issue.

[vaheqelyan]

Hey there! I'm experiencing the same (similar) issue. I'll try to help reproduce it with more details.

NOTE
The issue started with version 3.10.0; it was working fine in nuxt@3.9.3. You can also npm install nuxt@3.9.3, and everything works fine. However, when I upgraded to 3.10.0, things got weird.

---

Clone the repository: git clone https://github.com/vaheqelyan/nuxt-reproduce-26514
Install it and run the project

You have app.vue, and you also have default.vue in your layouts folder. Then, you import the NavBar component there.

default.vue

<template>
  <div>
    <NavBar />
    <main>
      <slot />
    </main>
    <footer>Footer</footer>
  </div>
</template>

<script setup lang="ts">
import NavBar from "~/components/NavBar/NavBar.vue";
</script>

<!-- When you comment out the style tag, the issue disappears. -->
<style>
html,
body {
  min-height: 100%;
}
</style>

NavBar.vue

<template>
  <nav>
    <img
      class="logo"
      src="https://preview.redd.it/i-got-bored-so-i-decided-to-draw-a-random-image-on-the-v0-4ig97vv85vjb1.png?width=640&crop=smart&auto=webp&s=22ed6cc79cba3013b84967f32726d087e539b699"
    />
  </nav>
</template>

<!-- Removing lang='ts' makes the issue disappear. -->
<script setup lang="ts">
onMounted(() => {
  console.log("mounted");
});
</script>

<style>
.logo {
  max-width: 100px;
}
</style>

[alokVishu]

Hello Everyone,

I am also facing the same issue with Nuxt using TypeScript in Build. The error disappears in v3.9.3 but occurs in a higher version of Nuxt. Do you know of any workaround or solution?