Support browser use without a build step?

[chriscalo]

This directive looks super useful. I run into a need for something like this a lot.

Might I be able to convince you to provide a dist/index.js (or similar) version that can run unmodified in a browser?

For quick prototyping purposes, here's what I'm trying to do:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/v-switch-case/dist/index.js"></script>

<script>
  console.log(vSwitch);
  Vue.use(vSwitch);
</script>

<div id="app">
  <div v-switch="size">
    <h1 v-case="'large'">Large</h1>
    <h2 v-case="'small'">Medium</h2>
    <h3 v-default>Default</h3>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data: () => ({
      size: 'medium',
    }),
  });
</script>

[chriscalo]

In case it's helpful, this pen shows what's required to use this in a browser today without a build step:

https://codepen.io/chriscalo/pen/wRageq

I would take a stab at a PR, but I'm just not sure of the best mechanism for building a browser-ready file. (parcel build src/index.js --target browser?)

[lmiller1990]

Hi, sorry about the slow reply.

That example you created looks helpful. Providing a browser build is something I've been wanting to do, I'll adopt what you've posted and hopefully have something up in the next week.

Thanks!

[chriscalo]

No urgency on my end, so don't rush on my behalf, but thanks for taking a look. 🙏 Excited to use this to clean up some convoluted prototype logic whenever it's ready.

[lmiller1990]

Should be good now, give this a try:

<script src="https://unpkg.com/v-switch-case/dist/v-switch.min.js"></script>

Install like so:

<script>
Vue.use(VSwitch)
</script>

Should work! Let me know if that works.

[chriscalo]

Works like a charm, thanks! 🙏