search

ntohq / buefy-next

Lightweight UI components for Vue.js (Vue3) based on Bulma
https://v3.buefy.org
MIT License
98 stars 9 forks source link

buefy-next for CodePen #221

Open kikuomax opened 3 months ago

kikuomax commented 3 months ago

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.

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.

wesdevpro commented 3 months ago

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

kikuomax commented 3 months ago

@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.

wesdevpro commented 3 months ago

@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?

kikuomax commented 3 months ago

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.

wesdevpro commented 3 months ago

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

wesdevpro commented 3 months ago

@kikuomax have you tried using jsdelivr? buefy/buefy#4033

kikuomax commented 3 months ago

@wesdevpro The root cause might be this line. https://github.com/ntohq/buefy-next/blob/6b92f77574a8ec7adb9901309507628d5bd8577b/packages/buefy-next/src/index.js#L25

image

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

kikuomax commented 3 months ago

Related issue

wesdevpro commented 1 month ago

@kikuomax is their any update here?

wesdevpro commented 3 weeks ago

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

kikuomax commented 1 week ago

@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! image

wesdevpro commented 1 week ago

@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! image

Makes sense @kikuomax 👍🏼 and sounds like a plan