N
Nuxt•4w ago
Howler

defineProps not auto imported?

I am new to Nuxt and Vue. I have setup a new Nuxt v3.16.1 project. Created a default.vue layout with some additional components. However, when I try to use defineProps, I am receiving the following error message: Cannot find name 'defineProps'. 
Here is the script code:
<script setup lang="ts">

import ThemeToggle from "./ThemeToggle.vue";

defineProps<{ isSidebarOpen: boolean }>();
defineEmits(["toggle-sidebar"]);
</script>
Here is the script code:
<script setup lang="ts">

import ThemeToggle from "./ThemeToggle.vue";

defineProps<{ isSidebarOpen: boolean }>();
defineEmits(["toggle-sidebar"]);
</script>
I also seem to get messages about components being imported but not used, when they are clearly used in the template section. I assume there is additional configuration for this? Sorry if this is a noobie question, but I really like where Nuxt is and where its going and just want to get past these issues. Thanks!
3 Replies
kapa.ai
kapa.ai•4w ago
Hi @Howler. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're encountering a common issue with TypeScript in Nuxt 3. Let me help you resolve this. The Issue with defineProps In Nuxt 3, defineProps should be auto-imported, but there are a few reasons why you might be seeing this error: 1. You need to ensure you have lang="ts" in your script tag (which you do have correctly) 2. There might be an issue with your TypeScript configuration Solution First, make sure you don't need to manually import defineProps. It should be auto-imported by Vue/Nuxt as mentioned in the Vue.js Development documentation. Your script setup looks correct: 
<script setup lang="ts">
// No need to import defineProps, it should be auto-imported
defineProps<{ isSidebarOpen: boolean }>();
defineEmits(["toggle-sidebar"]);
</script>
<script setup lang="ts">
// No need to import defineProps, it should be auto-imported
defineProps<{ isSidebarOpen: boolean }>();
defineEmits(["toggle-sidebar"]);
</script>
Possible Fixes 1. Check your IDE/editor setup: Make sure you have Volar installed if you're using VS Code, and that you've enabled Takeover mode by disabling the built-in TypeScript extension for your workspace. 2. TypeScript module detection: There's a known issue with TypeScript and script setup components that can sometimes cause problems with auto-imports. This is related to how TypeScript treats these components as scripts rather than modules. A recent fix in Nuxt addresses this by setting moduleDetection to 'force' in the TypeScript configuration. 3. Try using toRefs for props: If you're having reactivity issues with props, you can use toRefs as mentioned in this Stack Overflow post: 
<script setup lang="ts">
const props = defineProps<{ isSidebarOpen: boolean }>();
// If you need to destructure props while maintaining reactivity
// const { isSidebarOpen } = toRefs(props);
</script>
<script setup lang="ts">
const props = defineProps<{ isSidebarOpen: boolean }>();
// If you need to destructure props while maintaining reactivity
// const { isSidebarOpen } = toRefs(props);
</script>
Regarding Components Not Used Warning For the warning about components being imported but not used, make sure: 1. You're actually using the imported components in your template section 2. The component names in the template match the import names (case-sensitive) 3. If you're using kebab-case in templates (like <theme-toggle>), make sure it corresponds to the PascalCase import (ThemeToggle) Nuxt 3 has auto-import for components placed in the components/ directory, so you might not even need to manually import ThemeToggle if it's in the right location. If you continue to have issues, you might want to check your Nuxt configuration or consider sharing more of your project structure for more specific help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@391433788590391297> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Howler
HowlerOP•4w ago
Turns out that Vetur plugin for VSCode was causing the issue. I removed it and all is almost right in the world. Still have to figure out why imported components need the .vue extension

Did you find this page helpful?