buefy-next for CodePen

Description

I had trouble to install buefy-next into a Vue 3 app on CodePen. I had to let the app use the buefy-next plugin but was not able to obtain the plugin object.

Adding https://unpkg.com/@ntohq/buefy-next/dist/buefy.js to the external scripts did not work; it populated Buefy in the global scope, though, it was an empty object ({}).
Neither worked Importing https://esm.sh/@ntohq/buefy-next.

I think we would need to distribute a "global" variant of buefy-next, which puts the buefy-next plugin into the top-level var Buefy. Vue 3 provides such a variant: https://unpkg.com/vue@3.4.21/dist/vue.global.js

Why Buefy need this feature

If buefy-next is supported on CodePen, we can update the CodePen in the issue template, which currently does not use buefy-next but Buefy for Vue 2.

This will also allow us to include buefy-next via a <script> tag.

@kikuomax Is it possible that the package name and the name of the .js file are to blame?

@kikuomax Is it possible that the package name and the name of the .js file are to blame?

@wesdevpro It might be, but I am sceptic about the possibility.

@kikuomax Is it possible that the package name and the name of the .js file are to blame?

@wesdevpro It might be, but I am sceptic about the possibility.

I feeling more skeptic my self about that assumption. How much work are we talking here to create the global version of buefy?

I feeling more skeptic my self about that assumption. How much work are we talking here to create the global version of buefy?

@wesdevpro I think Rollup should have an option to output a suitable bundle. We can learn from how Vue builds its global bundle.

For the record this is the code pen @kikuomax is talking about: https://codepen.io/service-paradis/pen/KKgJZOK

@kikuomax have you tried using jsdelivr? buefy#4033

@wesdevpro The root cause might be this line.

buefy-next/packages/buefy-next/src/index.js

Line 25 in 6b92f77

use(Buefy)

Calling Vue.use no longer makes sense in Vue 3.

Related issue

#177

@kikuomax is their any update here?

@kikuomax please let me know if there is any specific direction you would like me to take in investigating this issue. Thanks 😎

@wesdevpro Although we cannot test if buefy-next really works on CodePen until we publish the v0.1.4 package, I wrote the following HTML which is supposed to simulate the CodePen environment.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CodePen Simulation</title>
    <link rel="stylesheet" href="dist/buefy.css">
    <script>
      // we need this tweak because Buefy is not built for browsers
      window.process = { env: { NODE_ENV: 'production' } };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.4.31/dist/vue.global.min.js"></script>
    <script src="dist/buefy.min.js"></script>
  </head>
  <body>
    <div id="app" class="container"></div>

    <script>
      const { createApp, ref } = Vue;

      const App = {
        template: `
          <section class="container">
            <b-button @click="clickMe">Click Me</b-button>
          </section>
        `,
        methods: {
          clickMe() {
            this.$buefy.notification.open('Clicked!!');
          }
        }
      };

      const app = createApp(App);
      app.use(Buefy.default);
      app.mount('#app');
    </script>
  </body>
</html>

I got it worked!

@wesdevpro Although we cannot test if buefy-next really works on CodePen until we publish the v0.1.4 package, I wrote the following HTML which is supposed to simulate the CodePen environment.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CodePen Simulation</title>
    <link rel="stylesheet" href="dist/buefy.css">
    <script>
      // we need this tweak because Buefy is not built for browsers
      window.process = { env: { NODE_ENV: 'production' } };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.4.31/dist/vue.global.min.js"></script>
    <script src="dist/buefy.min.js"></script>
  </head>
  <body>
    <div id="app" class="container"></div>

    <script>
      const { createApp, ref } = Vue;

      const App = {
        template: `
          <section class="container">
            <b-button @click="clickMe">Click Me</b-button>
          </section>
        `,
        methods: {
          clickMe() {
            this.$buefy.notification.open('Clicked!!');
          }
        }
      };

      const app = createApp(App);
      app.use(Buefy.default);
      app.mount('#app');
    </script>
  </body>
</html>

I got it worked!

Makes sense @kikuomax 👍🏼 and sounds like a plan

@kikuomax I don't Buefy-next@v0.1.4 fixed the code pen issue

@wesdevpro I think I made it work.
https://codepen.io/kikuomax/pen/ExJbpoG

@wesdevpro I think I made it work. https://codepen.io/kikuomax/pen/ExJbpoG

The code pen also worked for me. Now we just need to update all of our code pens?