[Vue warn]: failed to resolve component: b-field

Question

I'm trying to create a codepen example to reproduce a CSS issue. However, I've run into a problem when creating the codepen itself. It is not recognizing Buefy's b-field component - in the console this warning appears:

In the codpen Settings these packages have been included:
https://unpkg.com/vue@next
https://unpkg.com/buefy/dist/buefy.min.css

Here's a link to the codepen.

And here's the code within the codepen:

JS

const app = Vue.createApp({
  data() {
    return {
      data: { "description": "lantern", "price": "15.75" }
    }
  }
});

app.mount('#demo');

HTML

<div id="demo">
  
  <!-- using Bulma classes -->
  <div class="field is-horizontal">
    <div class="field-label is-normal">
      <label class="label">Purchase price of {{ data.description }}:</label>
    </div>
    <div class="field-body">
      <div class="field">
        {{ data.price }}
      </div>
    </div>
  </div>

  <!-- using Buefy component -->
  <b-field horizontal label="Purchase Price of Lantern:">{{ data.price }}</b-field>

</div>

CSS

.is-horizontal {
  background-color: yellow;
  color: red;
}

.field-label {
  text-align: left;
  background-color: lightblue;

  /* specify width */
  /*flex-grow: 2;*/   /* overwrites default value of 1 */
  min-width: 30%;

  /* center text vertically */
  display: flex;
  align-items: center;
  margin-top: -5px;
}

How can this warning be resolved so the Buefy component works in the codepen example?

Answer 1

You are missing javascript part of Buefy. You also need to include

https://unpkg.com/buefy/dist/buefy.min.js

However, doing bit further research, it seems currently Buefy supports only Vue version 2.x.

Answer 2

Buefy doesn't work yet with Vue3.

In their usage example, it becomes obvious from this line:

<script src="https://unpkg.com/vue@2"></script>

Admittedly, they could be more assertive about this limitation but, then again, it's not something to brag about, since Vue 3 has been out for quite some time.

Here are a few discussions around the same topic:

• https://github.com/buefy/buefy/issues/2505
• Does Bulma Buefy support VUE 3?

---

List of dependencies to make Buefy work in codepen:
(disclaimer: I got them from this pen)

CSS:

• https://unpkg.com/buefy/dist/buefy.min.css

JS:

• https://unpkg.com/vue@2/dist/vue.min.js
• https://unpkg.com/buefy/dist/buefy.min.js

---

According to the Getting started: Standalone section, all you need (besides latest Vue 2) are the buefy css and js files.
To me, that means the Buefy js file looks for window.Vue global and registers itself as a plugin to it (therefore you don't have to do it).