vue | Screencast code , script and cupcakes | Learning library

Top-level await must be used in combination with Suspense (which is experimental).

You should be able to just do it in onBeforeMount. Not as elegant; but a solid solution. Something like this:

Every red and blue cells have a minimal width (with flex-basis and flex-shrink: 0) but not the yellow.

The yellow are using the largest width possible for them, but the others are going out their container.

In this situation, the simplest way to "fix" it is to set a minimal width to the yellow bars too.

A small example (with variables to simplify maintainability)

Diff:

Solved by including @apollo/client and ts-invariant/process into the nuxt build transpile like so:

Vue 3 does not require using the Composition API. The Options API is still available and will not be removed, as explained by two Vue core team members:

Thorsten Lünborg in Vue 3: Data down, Events up (19-MAY-2020):

IMPORTANT: The composition API is additive, it’s a new feature, but it doesn’t and will not replace the good ole “Options API” you know and love from Vue 1 and 2. Just consider this new API as another tool in your toolbox that may come in handy in certain situations that feel a little clumsy to solve with the Options API.

Ben Hong in Enjoy the Vue #48: "New in Vue 3: The Composition API" (19-JAN-2021):

[00:01:03] T: Yeah. Well, the first thing I remember hearing was that it was replacing the options API.

[00:01:08] BH: Big disclaimer. That isn’t happening. Big disclaimer.

...

[00:09:10] BH: [...] this is not something you need to go and rewrite your app in. [...] the composition API is not like, drop the options do composition. It's an additive thing that when you have a problem that it can solve, it's really great for that.

An early RFC for the Composition API had only considered deprecating the Options API:

A previous draft of this RFC indicated that there is the possibility of deprecating a number of 2.x options in a future major release, which has been redacted based on user feedback.

The Vue docs also confirm this:

Will Options API be deprecated?

No, we do not have any plan to do so. Options API is an integral part of Vue and the reason many developers love it. We also realize that many of the benefits of Composition API only manifest in larger-scale projects, and Options API remains a solid choice for many low-to-medium-complexity scenarios.

The ItemProperties component has multiple root nodes because it renders a list in the root with v-for.

Based on the class name (infobox-item-properties), I think you want the class to be applied to a container element, so a simple solution is to just add that element (e.g., a div) in your component at the root:

You need to update your vue-loader

The console warning from Vue provides a helpful hint:

I had the same error after running vue add vuetify

Run npm update and re-create the project again.

Also make sure you are on the latest versions of the following.

https://blog.chromium.org/2021/05/update-on-user-agent-string-reduction.html

Is helpful to read. Some key points:

"Beginning in M92, we plan to start sending deprecation notices for the navigator.userAgent, navigator.appVersion, and navigator.platform getters in the DevTools Issues tab."

"If your site, service, library or application relies on certain bits of information being present in the User Agent string such as Chrome minor version, OS version number, or Android device model, you will need to begin the migration to use the User Agent Client Hints API instead."

I know I am not using the navigator getters in question so at this point, it seems I can only wait for an update to the library's .js (in my case, bootstrap 4) to make the warning go away.