Nuxt.js+TypeScriptにjQueryを導入するルーティン

触れる回数は多いけどいまだに覚えられないのでメモ
これよりいい方法いっぱいあると思います

コマンド

コマンドライン

$ npm install --save-dev jquery @types/jquery

nuxt.config.js

nuxt.config.js

+ const webpack = require('webpack')

export default {
// ...省略...
// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
+   vendor: ["jquery"],
+   plugins: [
+     new webpack.ProvidePlugin({
+       $: "jquery"
+     })
+   ],
  }
}

tsconfig.json

tsconfig.json

{
  "compilerOptions": {
// ...省略...
    "types": [
+     "@types/jquery",
      "@nuxt/types",
      "@nuxtjs/axios",
      "@types/node"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

他の部分が人によってはちょっと違うかもです。

さいごに

これで$がいつも通り使えるようになりました。tsは型を重視しているため、jQueryで使う型を定義する必要があるんですね。それではまた。