Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

buefy-next for CodePen #221

Open
kikuomax opened this issue Apr 2, 2024 · 16 comments
Open

buefy-next for CodePen #221

kikuomax opened this issue Apr 2, 2024 · 16 comments
Assignees
@kikuomax
Labels
enhancement New feature or request
Milestone
v0.2.1

Comments

@kikuomax
Copy link
Collaborator

kikuomax commented Apr 2, 2024 •
edited
Loading

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 kikuomax added the enhancement New feature or request label Apr 2, 2024
@kikuomax kikuomax mentioned this issue Apr 2, 2024
Closed
7 tasks
@wesdevpro
Copy link

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

@kikuomax
Copy link
Collaborator Author

kikuomax commented Apr 3, 2024

@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
Copy link

@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
Copy link
Collaborator Author

kikuomax commented Apr 4, 2024

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
Copy link

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

@wesdevpro
Copy link

wesdevpro commented Apr 15, 2024 •
edited
Loading

@kikuomax have you tried using jsdelivr? buefy#4033

@kikuomax
Copy link
Collaborator Author

@wesdevpro The root cause might be this line.

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

Line 25 in 6b92f77

use(Buefy)

image

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

@kikuomax
Copy link
Collaborator Author

Related issue

@kikuomax kikuomax added this to the v0.1.4 milestone Apr 15, 2024
@wesdevpro
Copy link

@kikuomax is their any update here?

@wesdevpro wesdevpro moved this to 🏗 In progress in Buefy Vue3 Project Board Jun 21, 2024
@wesdevpro
Copy link

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

kikuomax added a commit to kikuomax/buefy that referenced this issue Jun 26, 2024
@kikuomax
fix(lib): meaningless use(Buefy)
ec9c040 
Fixes the issue that `use(Buefy)` in the root index file was
meaningless or rather harmful to Vue 3 apps. It caused a "not a
function" error in some environment:
see ntohq#221 (comment)
Simply removes `use(Buefy)` in the root index file.
@kikuomax kikuomax mentioned this issue Jun 26, 2024
Merged
kikuomax added a commit that referenced this issue Jun 26, 2024
@kikuomax
fix(lib): meaningless use(Buefy) (#257)
ca1c738 
Fixes the issue that `use(Buefy)` in the root index file was
meaningless or rather harmful to Vue 3 apps. It caused a "not a
function" error in some environment:
see #221 (comment)
Simply removes `use(Buefy)` in the root index file.
@kikuomax kikuomax mentioned this issue Jul 4, 2024
Closed
@wesdevpro wesdevpro mentioned this issue Jul 7, 2024
Merged
@kikuomax
Copy link
Collaborator Author

kikuomax commented Jul 7, 2024

@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
Copy link

@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

@wesdevpro
Copy link

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

@wesdevpro wesdevpro modified the milestones: v0.1.4, v0.1.5 Jul 23, 2024
@wesdevpro wesdevpro added the need investigation Need investigation label Jul 23, 2024
@kikuomax
Copy link
Collaborator Author

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

@wesdevpro
Copy link

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

@kikuomax
Copy link
Collaborator Author

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

@wesdevpro I believe so.

@wesdevpro wesdevpro modified the milestones: v0.2.0, v0.2.1 Jan 17, 2025
@wesdevpro wesdevpro moved this from 🏗 In progress to 🔖 Ready in Buefy Vue3 Project Board Jan 17, 2025
@wesdevpro wesdevpro removed the need investigation Need investigation label Jan 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kikuomax kikuomax

Labels
enhancement New feature or request
Projects
Buefy Vue3 Project Board
Status: 🔖 Ready
Milestone
v0.2.1
Development

No branches or pull requests
2 participants
@kikuomax @wesdevpro