IntelliJでNuxt.jsのdebugできるようにする(chrome/opera)

IntelliJでNuxt.jsをdebug(breakpoint)できるようにしたくて、設定するメモ。

nuxt.config.jsを変更する

下記の3行を追加する


extend(config, ctx) { if (ctx.isDev && ctx.isClient) { //追加 config.devtool = 'eval-source-map' //追加 } //追加 // 省略 }

$ npm run dev を実行する

Chromeのプラグインをインストールする

下記のプラグインをインストールする

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=ja

インストール後にデバッグするタブで下記のアイコンを右クリックする

その後、inspect in IDEA をクリックする

下記のバーがでてきたらデバッグモードになる

breakpointを貼って、そのURLまで遷移すれば、ステップ実行ができるようになります。

IntellijのNuxt.jsでimportのailiasを設定したい

Intellijのvueとかjsのサポートがかなりよくなってきたので、1IDEで完結した欲求がでてきました。
vscodeだとある程度勝手に認識してくれるんだけど、Intellijはできないみたいで設定してあげる必要がある模様。

nuxt.config.jp

module.exports = {
  resolve: {
    extensions: ['.js', '.json', '.vue', '.ts'],
    root: path.resolve(__dirname),
    alias: {
      '@core': path.resolve(__dirname + '/src_core'),
      '@web': path.resolve(__dirname + '/src_web'),
    }
    // 省略
  },

このrootaliasを追加すればいける模様。(resolveを書いてなかったらそれも追加で)

import sampleRepos from "@core/modules/repository/sampleRepos
import samplePage from "@web/modules/repository/samplePage

これがジャンプできるようになる。便利

Vue.jsのcomputedで引数を使いたい

Vuejsで便利なcomputedですけど、引数取りたいって思うタイミングがあり検証。
ちなみに引数とりたいタイミングは、ループでテーブル作成してるときとかです。

lambda式(アロー関数)を使えばできました。

<template>
  <div id="app">
    <p>sample('a'):{{sample('a')}}</p>  // <- 使用箇所
    <p>sample('r'):{{sample('r')}}</p>  // <- 使用箇所
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    sample() {
      return r => r === "a";   // <-  ここでアロー関数を実行
    }
  }
};
</script>

出力結果はこちら。

sample('a'):true

sample('r'):false

computed特有のキャッシュ等が効かないらしいけど、methodとwatchでやるんだったらあんまりかわらなくて、computedですっきりかけた方がいいかなと思うので採用します。

Vuejsでselect boxにdefault valueを設定するには?

Vuejsでselectboxにdefault valueを設定するのにいつも覚えられないので、メモ

<select v-model="args">
  <option :value="null" disabled>Please select...</option>
  <option :value="'A'">A</option>
  <option :value="'B'">B</option>
</select>

:value="null" disabled を入れるっていうのを毎回調べてる気がする。。。

Vue.jsでファイルをdrag and dropする

Vue.jsでファイルのdrag and drop をするときにdomイベントをどうやって渡すんだ?ってなったので、メモ。

公式のドキュメントに書いてあったので イベントハンドラ でそれを参照する。

$event を使うことででDOMイベントを渡すことができる。

サンプルコードは下記

<template>
  <div>
      <h1>drag and drop</h1>
            <label></label
      <div class="drop_area" @dragover.prevent @dragleave.prevent @drop.prevent @drop="drop($event)">

      </div>
  </div>
</template>

<script>
  export default {
    name: 'main-page',
    data () {
      return {}
    },
    methods: {
      drop (event) {
        // 処理を書く
      }
    }
  }
</script>

<style>
.drop_area {
  border: 5px solid gray;
  background: gray;
  width:  400px;
  height: 400px;
}
</style>


ブラウザはファイルをdrag and drop するとデフォルトの処理が発火してしまうので、下記を定義しておけば、それを抑止して、カスタムな処理ができるようになる。

@dragover.prevent @dragleave.prevent @drop.prevent

うん。簡単。