Select2 in Vue.JS

Integrations
#1

Hello,

I want to use Select2 with Vue .js, but all I get is the error message: “select2 is not a function”.
This is my package.json:

{
  "name": "matomo-siteid",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vue-select2": "^0.2.6",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

What should I do to make it work?

#2

I am not a Vue.js expert, but I have a couple of questions:

  1. Did you install the Select2 package via npm install select2? If so, I would expect to see it in your package.json, and I don’t. (Maybe you forgot the appropriate --save-* option?).
  2. Did you source the appropriate files (JS and CSS) into your application’s HTML file?
#3

How i can start us using select2 on vuejs, can you give a proper guide or documantation ?

#4

Select2/jQuery and Vue do not work well together, because Vue wants to control the DOM, whereas Select2 wants to insert its own elements into the DOM outside of Vue’s control or knowledge.

That said, it is possible to do, and it’s even documented in the VueJS documentation: https://vuejs.org/v2/examples/select2.html (click the “Open Sandbox” button to see the source code).

#5

There is a alternative : https://vue-select.org/