cretueusebiu / vform

Handle Laravel-Vue forms and validation with ease.
https://vform.vercel.app
MIT License
607 stars 120 forks source link

Nuxt3 with vue 3 composion API #147

Open fawel11 opened 1 year ago

fawel11 commented 1 year ago

I have been using this pakcage for my vue2 project without nuxt. But I tried to use it in my nuxt3 project. But I couldn't be able to run the package.

plugin/apiFetch.ts: `import { defineNuxtPlugin } from '#app' import Cookies from 'js-cookie'

export default defineNuxtPlugin(nuxtApp => { const config = useRuntimeConfig()

let token =Cookies.get('TOKEN');//'49|VKVPHxftNkveptKUy9lBP5OQtnqQXWsWOjzFOeym'

const headers = { Authorization: Bearer ${token}, Accept: 'application/json', 'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'), } nuxtApp.provide( 'apiFetch', $fetch.create({ baseURL: config.BASE_URL, credentials: 'include', headers: headers, }) ) })`

How can i use form.post in my component? I used this:

`const { $apiFetch } = useNuxtApp()

  const form = reactive( {
    leave_reason: null,

  } )

  async function apply() {

    // const rr = await $apiFetch('/leave/apply-leave', {method: 'POST'})
    const response = await this.form.post('/leave/apply-leave')

//this.form=rr;

  }`

But not worked. Anyone here to help?

dipuahmed018 commented 1 year ago

Can you try this?

const form = reactive(new Form({
    leave_reason: null,
  })
 )

and instead of this.form.post

just use form.post