heroicons | Use heroicons in your Django and Jinja templates

React.ReactNode is the type of a rendered component. For example:

For the HeadlessUI part, the answer was already given a few days ago: https://stackoverflow.com/a/67540286/8816585

Nuxt3 is really close to ship, probably at the end of the month or in the one to follow. If you want to keep updated, you can subscribe to this github issue or simply follow the co-founder @Atinux on Twitter.

You could try using @nuxtjs/composition-api to have access to the composition API but even with this, I'm not sure that this will work properly (or/and will be easy to use).

The best call as of right now, use Nuxt v2 with latest TailwindCSS v2.

The migration should not be that hard from 2 to 3. Also, HeadlessUI is something that you will not have access to as of right now IMO (maybe there are some packages that do handle the use of it but they will probably break/not be working so great).
Try using you own components or import a small UI library with only the JS logic. And remove it once Nuxt3 is here.

Can you try to edit setUser(user => ({ ...user, [name]: value })); to setUser({ ...user, [name]: value });

And don't forget to add a name attribute to your input like this : beucase you use the name of e.target here : const { name, value } = e.target;

So, the input must be like this :

Have you tried using BrowserRouter instead of MemoryRouter in index.tsx. That normally works for me.

I'm a bit surprised you're loading types from the types.d file direct and with a build path! I'd expect rather import { Type } from '@myorg/component-library.

That's because as part of creating the package.json for a typescript-authored npm library you'd be defining a main property pointing to the place that exports all the Javascript properties and a types property pointing to the place that exports the typescript types you want.

If that main entry point (because of your build process) is actually build/index.js and the corresponding types file is build/index.d.ts then you'd never directly reference the build folder or files when importing - pointing to the right path is dealt with by the bundling process.

Take a look at a mainstream (but simple) typescript npm module like https://github.com/jamiebuilds/unstated-next/blob/master/package.json ( https://www.npmjs.com/package/unstated-next )

You can see the main property pointing to the file which should export the javascript names https://github.com/jamiebuilds/unstated-next/blob/master/package.json#L6 and the types property pointing to the file which should export the types https://github.com/jamiebuilds/unstated-next/blob/master/package.json#L9 and these happen to be in the 'dist' folder but this is never referenced when importing it as per the docs at https://www.npmjs.com/package/unstated-next

This is the sample code that may help you to achieve what you want to do: https://stackblitz.com/edit/angular-ivy-xymefd?file=src%2Fapp%2Fbutton%2Fbutton.component.ts

What I changed from your code are:

1. Add ButtonIconDirective to AppModule declarations.
2. Use appButtonIcon instead of docsButtonIcon.
3. Inject ElementRef into ButtonIconDirective. (We will use ElementRef in ButtonComponent).
4. Append a template variable onto to get its component instance.
5. Rewrite ngAfterContentInit in ButtonComponent method to update size and add new CSS classes at runtime:

It looks as though the SVG file isn't valid as a standalone image. Try this:

First you have to use e.currentTarget.id instead of e.target.id so you get the id of current image.