Nathan
Nathan
PostsComments
NNuxt
Created by Nathan on 11/6/2024 in #❓・help
Can't use import from "from '#ui/types' "
Hi everyone, im currently trying to learn nuxt and start using nuxt ui. I just wanted to do a simple form like shown in the documentation : https://ui.nuxt.com/components/form. 
<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types';
const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

const state = reactive({
  email: undefined,
  password: undefined
})

async function onSubmit(event: FormSubmitEvent<Schema>) {
  // Do something with data
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>

    <UFormGroup label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormGroup>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>
<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types';
const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

const state = reactive({
  email: undefined,
  password: undefined
})

async function onSubmit(event: FormSubmitEvent<Schema>) {
  // Do something with data
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormGroup label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormGroup>

    <UFormGroup label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormGroup>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>
But, i have the error : "Vue: Cannot find module #ui/ types or its corresponding type declarations.". I can give more details if needed, here are my version of the dependencies : 
    "@nuxt/ui": "^2.19.2",
    "@shared/types": "workspace:*",
    "nuxt": "^3.13.2",
    "@nuxt/types": "^2.18.1",
    "vue": "latest",
    "zod": "^3.0.0",
    "vue-router": "latest"
    "@nuxt/ui": "^2.19.2",
    "@shared/types": "workspace:*",
    "nuxt": "^3.13.2",
    "@nuxt/types": "^2.18.1",
    "vue": "latest",
    "zod": "^3.0.0",
    "vue-router": "latest"
30 replies