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

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:

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

app.mount('#demo');

HTML

<div id="demo">
  
  <!-- using Bulma classes -->
  <div >
    <div >
      <label >Purchase price of {{ data.description }}:</label>
    </div>
    <div >
      <div >
        {{ 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?

CodePudding user response：

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:

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:

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

CodePudding user response：

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.