vue.jscodepenbuefy

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

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: enter image description here

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?

Solution

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