docs(installation): add ES Module setup

[kingma-sbw]

Description

Without tooling include Vuetify and Vue using import map

Markup:

none

[J-Sek]

I would not really advise users to use it without integrity hashes. And even if integrity was supported on all browsers and we would refine PR with {version} placeholders, single CDN and closing script tag, I personally have doubts whether it brings any value over existing instructions for CDN-based setup.

[kingma-sbw]

I would not really advise users to use it without integrity hashes. And even if integrity was supported on all browsers and we would refine PR with {version} placeholders, single CDN and closing script tag, I personally have doubts whether it brings any value over existing instructions for CDN-based setup.

the big advantage apart from strict-typing is that a ES Module issolatates its content so it is even possible to have more than one (mini) Vue app on a page.

[J-Sek]

...possible to have more than one (mini) Vue app on a page

This sounds like a very niche use case though.

Anyway, assuming we include this section, I wonder if it would be more beneficial to have a full working example (e.g. [1] or [2]) as well as some links to MDN, SHA generator, etc.

BTW. While working on these examples I noticed that CDN suggested URLs with */+esm or shortcut esm.run/{package} which both did not work, making the case for full demo even stronger.

[kingma-sbw]

Anyway, assuming we include this section, I wonder if it would be more beneficial to have a full working example (e.g. [1] or [2]) as well as some links to MDN, SHA generator, etc.

BTW. While working on these examples I noticed that CDN suggested URLs with */+esm or shortcut esm.run/{package} which both did not work, making the case for full demo even stronger.

Valid points. But they would also apply to other sections ("Using CDN").

[MajesticPotatoe]

feels like these instructions are pretty much 1:1 with the regular cdn install instructions, just with how to use an script/link tag sprinkled in, and an esm import instead of .min/js|.css. Would probably refine this to just include both (update the section above to have the links for the css/js and esm versions, and add a note about it instead of making it its own section

[J-Sek]

@MajesticPotatoe , Including @{{ version }} for Vue, integrity part and non-google link to Roboto are all my personal preferences and I won't mind you adjusting it for simplicity and consistency.

[KaelWD]

The whole page is like that really, all it needs to say is

• load materialdesignicons.css somehow
• load vuetify/styles or dist/vuetify.css somehow
• app.use(createVuetify())

but apparently people need a copy-paste guide for every little thing these days.