【Vue.js】templateにscript要素を記述する方法

• componentタグを使用する。

<component is="script" src="./hoge.js" async></component>

【Storybook】ControlsやActionsなどのaddonsタブが表示されなくなった場合の対処方法

要点

• localstorageをクリアする。

詳細

• Storybookの設定で「Show addons」にチェックが付いているにもかかわらず、addonsタグが表示されなくなる場合がある。
• この場合、localstorageをクリアすると表示されるようになる場合がある。

【npm】現在のnode_modulesディレクトリ の状態でpackage-lock.jsonを生成する方法

npm i --package-lock-only

【Nuxt.js】scssを使用できるようにする方法

インストール方法

(1)ライブラリをインストールする。

npm i -D sass sass-loader fibers

(2)nuxt.config.jsを編集する。

import Sass from 'sass';
import Fiber from 'fibers';

export default {
  ...
  build: {
    loaders: {
      scss: {
        implementation: Sass,
        sassOptions: {
          fiber: Fiber,
        },
      },
    },
  },
};

エラー発生時の対応方法

アプリ起動時にエラーTypeError: this.getOptions is not a functionが発生した場合

• sass-loaderのv11.0.0以降は、webpackのv5以降が必要。
• そのため、nuxtで使用しているwebpackのバージョンを確認し、webpackのv5より以前のバージョンであれば、sass-loaderのバージョンも下げる。

# インストールされているnuxtのバージョンで使用されているwebpackのバージョンを調べる。
npm list webpack
nuxt-sample@1.0.0
└─┬ nuxt@2.15.8
  └─┬ @nuxt/webpack@2.15.8
    └── webpack@4.46.0

# 使用されているwebpackのバージョンがv5より前の場合、sass-loaderのバージョンをv10に下げることでエラーが解消する。
npm i -D sass-loader@10

github.com

【Vue.js】子コンポーネントのcssを上書きする方法

概要

• deep selector を使用する。

方法

vue2の場合

• ::v-deep の他に、 >>> または /deep/ を指定する方法があるが、バージョンによってはエラーになったり、解釈されなかったりする。

.parent-some-class ::v-deep .child-some-class {
  margin-top: 30px;   
}

vue3の場合

• vue3では、 >>> または /deep/ が廃止された。

::v-deep(.child-some-class) {
  margin-top: 30px;   
}
// ショートハンドの場合
:deep(.child-some-class) {
  margin-top: 30px;   
}

参考

github.com github.com

【Vue.js】コンポーネントのルート要素で発生するネイティブイベントを購読する方法

方法

• .native 修飾子を使用する。

<templete>
  <div>
    <some-component @click.native="onClick" />
  </div>
</templete>

用途

• ライブラリのコンポーネントを使用している場合に、そのコンポーネントで発生するclickイベント等のネイティブイベントを、そのコンポーネントを利用する側で購読したい場合。
• 自作のコンポーネントを使用している場合でも、そのネイティブイベントを購読したいのが特殊な場合で、そのためにコンポーネントに$emitするコードを書きたくない場合。

【Vue.js】子コンポーネントのdataをwatchする方法

• $watchで、子コンポーネントのdataを追跡するようにする。

{
  mounted() {
    this.$watch(
      () => this.$refs.someComponent.someData,
      (val) => {
        console.log(`someData updated: val: ${val}`);
      },
    );
  },
}