[Feature Request] Add ECMAScript module version to the releases

[mishamosher]

Problem to solve

Right now all the modern major browsers have support for ECMAScript Modules (ESM for short).

It would be awesome if Vuetify released an ESM like vue's vue.esm.browser.js.

I'd success packing the NPM release of Vuetify as an ESM with the help of Pika Web, and it works just fine for my needs. Obviously, I would prefer an official ESM release.

Proposed solution

I am not a fan of transpilers (TypeScript, SASS, etc., babel). Plain ECMAScript 2016+ and CSS has been enough for my needs this far.

The previous is the reason why I'm unable to easily thinker of a proposed solution for an ESM release of Vuetify, other than using Pika Web.

[mlebrasseur]

I'm using ECMAScript Modules everyday. If you guys release a Vuetify ESM, alot of people with use it including me (I'm waiting for this since the release of Vuejs ESM). 👀

[jdelrue]

Please release this

@mishamosher did you succeed using vuetify2? How?

[mishamosher]

@jdelrue I've only tried Pika Web with Vuetify2.

You'll need NodeJS.

Run this in a terminal:

mkdir VuetifyESM && cd VuetifyESM
echo {} > package.json
npm i vue vuetify
npm i @pika/web --save-dev
npx pika-web

You'll find the Vuetify ESM script inside the web_modules directory (vuetify.js).

[sfaut]

It would be great to have a Vuetify ES Module Browser Build like Vue do :

import Vue from "https://unpkg.com/vue@2.6.11/dist/vue.esm.browser";
import Vuex from "https://unpkg.com/vuex@3.1.2/dist/vuex.esm.browser";
import VueRouter from "https://unpkg.com/vue-router@3.1.5/dist/vue-router.esm.browser";
import Vuetify from "https://i-have-a-dream/vuetify@42/dist/vuetify.esm.browser";

https://vuejsdevelopers.com/2019/02/04/vue-es-module-browser-build/

[florealcab]

All our code is with ES Modules, so it will so good to have an official build of vuetify for that! Waiting for that, I use the solution of @mishamosher that seems to work

[ggedde]

I would love to see this in V3 so I can use it with Vite!

[mishamosher]

A lot has changed since the initial release of Pika Web. Its CDN is now able to offer ESM versions for a lot more of JavaScript libraries, Vuetify included.

As an example, https://cdn.pika.dev/vuetify@2.3.0 offers an ESM for Vuetify version 2.3.0.

Its not perfect though, as there are some oddities (skypackjs/skypack-cdn#18).

Also, there was a discussion about an ESM version for Buefy here: buefy/buefy#1662. Maybe a similar approach is possible in Vuetify?

[DRoet]

Currently webpack doesn't allow us to export as ESM, so we either have to wait untill webpack 5 comes out and supports it, or move to rollup to bundle this library

[Zony-Zhao]

@DRoet webpack or vue-cli is not the only choice! I'm using vite, which only works with ESM. If possible, make the vue3 release with ESM and the webpack way together.

[DRoet]

Vite is basically just rollup under the hood when bundling for production, an ESM build might come with the V3 release of Vuetify

[KaelWD]

We'll probably use webpack 5 now that it's out.

[DRoet]

webpack 5 still does not support libraryTarget: 'module' but hopefully soonTM, plenty of time left until the V3 release 😄

[Djaler]

@KaelWD is there any chance to backport esm build for Vuetify 2?
I tried to replace jest with vitest in my vue 2 + vuetify 2 project, but looks like vitest requires esm build and type: module or .mjs extension of files

[kingyue737]

Vue2.7 now has esm builds, but Vuetify 2 import cjs version, which results into multiple vue error in vitest