[{"data":1,"prerenderedAt":138},["ShallowReactive",2],{"legacy-question-70c682eabc34eee11e01551f9aee31aa":3,"legacy-question-author-koji-kadoma":111,"legacy-question-category-website-building":127},{"id":4,"title":5,"author":6,"body":7,"category":97,"date":98,"description":99,"extension":100,"locale":101,"meta":102,"navigation":103,"path":104,"seo":105,"slug":106,"stem":107,"tag":108,"updated":98,"__hash__":110},"legacyQuestions\u002F20210402000000-Gridsomeでのプラグインの使い方.md","Gridsomeでプラグインはどうやって使う？","koji-kadoma",{"type":8,"value":9,"toc":92},"minimark",[10,15,19,29,32,35,46,49,55,58,62,65,72,75,78,86,89],[11,12,14],"h2",{"id":13},"gridsome用プラグインの場合","Gridsome用プラグインの場合",[16,17,18],"p",{},"Gridsome用に書かれたプラグインであれば、",[20,21,22,26],"ol",{},[23,24,25],"li",{},"プラグインをインストール（npm or yarn）",[23,27,28],{},"gridsome.config.jsのpluginsに記述",[16,30,31],{},"だけで使えるようになります。",[16,33,34],{},"例えば、Google Analyticsプラグインだったら、",[36,37,42],"pre",{"className":38,"code":40,"language":41},[39],"language-text","yarn add @gridsome\u002Fplugin-google-analytics\n","text",[43,44,40],"code",{"__ignoreMap":45},"",[16,47,48],{},"でインストールして、gridsome.config.jsに、",[36,50,53],{"className":51,"code":52,"language":41},[39],"module.exports = {\n  plugins: [\n    {\n      use: '@gridsome\u002Fplugin-google-analytics',\n      options: {\n        id: 'UA-XXXXXXXXX-X'\n      }\n    }\n  ]\n}\n",[43,54,52],{"__ignoreMap":45},[16,56,57],{},"でプラグインを使う旨と、プラグインに渡すパラメータを記述すればすぐに適用されます。",[11,59,61],{"id":60},"vuejs用プラグインの場合","Vue.js用プラグインの場合",[16,63,64],{},"Vue.jsプラグインの場合は、プラグインにもよりますが、",[20,66,67,69],{},[23,68,25],{},[23,70,71],{},"main.js（src\u002Fmain.js）に記述",[16,73,74],{},"という、Vue.jsのプラグインの使い方そのままです。",[16,76,77],{},"ただし、GridsomeでVue.js用のプラグインを使う場合は、",[20,79,80,83],{},[23,81,82],{},"window APIなどブラウザ系のAPIを使っているとエラーになる",[23,84,85],{},"呼ぶタイミングによっては使えない",[16,87,88],{},"という点に注意が必要です。",[16,90,91],{},"特にwindow系のエラーは、プレビューサーバー（gridsome develop）ではエラーが出ないのに、ビルド（gridsome build）するとエラーになることが多いので、プラグインを追加したあとは、テストでビルドしておいたほうが安心です。",{"title":45,"searchDepth":93,"depth":93,"links":94},2,[95,96],{"id":13,"depth":93,"text":14},{"id":60,"depth":93,"text":61},"website-building","2021-04-02T06:00:00.000Z","Gridsomeでのプラグインの使い方","md","ja",{},true,"\u002F20210402000000-gridsome",{"title":5,"description":99},"70c682eabc34eee11e01551f9aee31aa","20210402000000-Gridsomeでのプラグインの使い方",[109],"gridsome","8wHNHLxpqNxzEmjDyrXnYlUD6wkW9EwspvThDe4kO64",{"id":112,"title":113,"body":114,"date":118,"description":119,"extension":100,"locale":101,"meta":120,"name":123,"navigation":103,"path":124,"seo":125,"slug":6,"stem":6,"updated":118,"__hash__":126},"legacyAuthors\u002Fkoji-kadoma.md","Koji Kadoma",{"type":8,"value":115,"toc":116},[],{"title":45,"searchDepth":93,"depth":93,"links":117},[],"2021-04-01T00:00:00.000Z","Webエンジニアです。Javascript、PHP、Ruby、Dockerなどをメインで使っています。",{"image":121,"url":122},"https:\u002F\u002Fwww.codit.work\u002Fimgs\u002Favatar\u002Fkoji-kadoma.png","https:\u002F\u002Fkoji.pages.dev\u002F",null,"\u002Fkoji-kadoma",{"title":113,"description":119},"H1yaGicrsv1CzYTbFeEXQosuYx93lIutD3_XwXMhAFk",{"id":128,"title":129,"body":130,"date":118,"description":129,"extension":100,"locale":101,"meta":134,"navigation":103,"path":135,"seo":136,"slug":97,"stem":97,"updated":118,"__hash__":137},"legacyCategories\u002Fwebsite-building.md","Webサイト構築",{"type":8,"value":131,"toc":132},[],{"title":45,"searchDepth":93,"depth":93,"links":133},[],{},"\u002Fwebsite-building",{"title":129,"description":129},"h9jPLD2mzMm3L4sFN5qWSiSirySQQLdnxLhQcvw8VlQ",1783320301522]