How to use vue-select in a simple HTML page?

Question

How to use vue-select in a simple HTML page?

880 Views Asked by Dom At 06 June 2022 at 07:41

It is my first "try" with Vue + vue-select.

I have imported Vue and vue-select like it is explained in the vue-select documentation.

And my first try is this simple HTML page :

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- include VueJS first -->
    <script src="https://unpkg.com/vue@latest"></script>

    <!-- use the latest vue-select release -->
    <script src="https://unpkg.com/vue-select@latest"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-select@latest/dist/vue-select.css"
    />
  </head>
  <body>
    <div id="app">
      <h1>Vue Select</h1>
      <v-select :options="options"></v-select>
    </div>

    <script>
      Vue.component("v-select", VueSelect.VueSelect);

      new Vue({
        el: "#app",
        data: {
          options: ["foo", "bar", "baz"],
        },
      });
    </script>
  </body>
</html>

When I try this page, I have these errors in the console :

What it is wrong in this first try? When I understand this first example, it will be easier for the rest.

Original Q&A

There are 1 best solutions below

**Rohìt Jíndal** · Accepted Answer · 2022-06-06T08:01:17.200000

I just checked your code and seems this issue is due to the vue version you are using. I just used version 2.* and it is working.

Demo :

Vue.component("v-select", VueSelect.VueSelect);
new Vue({
  el: "#app",
  data: {
    selected: 'foo',
    options: ["foo", "bar", "baz"]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
  <h1>Vue Select</h1>
  <v-select :options="options" v-model="selected"></v-select>
</div>

Update : Here is the Vue 3 version of v-select

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data: () => ({
    items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  }),
}).use(vuetify).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<script type="text/x-template" id="app-template">
  <v-app>
    <v-container fluid>
          <v-select
            :items="items"
          ></v-select>
    </v-container>
  </v-app>
</script>

<div id="app"></div>

How to use vue-select in a simple HTML page?

There are 1 best solutions below

Related Questions in VUE.JS

Related Questions in VUE-SELECT

Trending Questions

Popular # Hahtags

Popular Questions