It would be cool if you can make this a nuxt module

[misbahansori]

Hi, firstly I want to say thank you for this awesome repo. I have used this in my project and it works great. But when I want to create a new project with nuxt, I need to copy the code from this repo to my new project. It would be cool if someone could make this a nuxt module.

It would help a lot of people who want to use this in their nuxt project.

Thank you.

[amrnn90]

Hi @misbahansori, You can already use this as a Nuxt Layer. Add this to your existing Nuxt project's configuration:

// nuxt.config.ts

export default defineNuxtConfig({
  extends: ["github:amrnn90/breeze-nuxt#master"],
});

And make sure to add the dependencies of this repo to your own package.json and install them:

  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.1.3",
    "@tailwindcss/forms": "^0.5.2"
  },
  "dependencies": {
    "@headlessui/vue": "^1.6.5"
  }

Let me know how it goes!

[misbahansori]

Wow, it works out of the box. However, I found an issue with this approach, the typescript type for the user is not correct, I use a first_name and last_name format for the user. I there a way to configure it?

I also don't want the pages, but for this case, I can just replace them with my own. The things that I want to use in my project are the composables, middleware, plugins, and utils. Is it also possible to be configured?

[carlosvaldesweb]

@misbahansori Maybe you can override directly the composables. e.g.

useAuth.ts

export type User = {
  first_name: string;
  last_name: string;
  email?: string;
};

export type RegisterCredentials = {
  first_name: string;
  last_name:string;
  email: string;
  password: string;
  password_confirmation: string;
};

But after that you should overwrite the pages that need to be modified. I think that only register page. Maybe @amrnn90 has other answer.

[amrnn90]

I have added a generic type for the user, so now you can wrap the useAuth composable with your own like this:

// composables/useMyAuth.ts

type User = {
  first_name: string;
  last_name: string;
};

export function useMyAuth() {
  return useAuth<User>();
}

As for selectively choosing which parts of the layer to include, I do not know if it is possible right now, I think it would be a nice feature to have, you should open a feature request in Nuxt.