heroicon | Rails view helpers for the beautiful hand | Icon library

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 :

This is being caused by the tag containing v-show="show" on line 6 not having a transition around it.

If you wrap that tag in another transition with leave-active-class="duration-300", it will delay that from disappearing until your inner transitions are done.

Here's an example: https://codesandbox.io/s/nice-sky-o3be8?file=/pages/index.vue

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

From the HTML the element should match the :link selector. That means there's really only a couple of possible reasons.

1. The link isn't actually visible on the page - add page.save_and_open_screenshot before the click_link to see what the page actually looks like. Is it possible you're not running the browser wide enough, and it's collapsing to a mobile layout or something?

2. You have CSS being applied to the link which is changing the case of the text - screenshot would show that too

One other thing to try would be click_link('new_admin_country_submit') and see if that actually finds and clicks the link (which would indicate an issue with text case, etc)

I went with Listbox component from @headlessui/react to achieve the same result:

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: