Select2 in Vue.JS


#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?