// component.stories.js
 storiesOf('Store', module)
   .add('The Component, () => ({
     components: { TheComponent },
     template: '<the-component />'
   })) 

そこでStorybookでもVuexが使えるようにしました。

設定

// .storyobook/config.js
 import Vue from 'vue'
 import Vuex from 'vuex' // <— 追加
 
 import { configure } from '@storybook/vue'
 import { action } from '@storybook/addon-actions'
 
 Vue.use(Vuex) // <— 追加
 
 // 以下略 

//  component.stories.js
 storiesOf('Store', module)
   .add('The Component, () => ({
     components: { TheComponent },
     template: '<the-component />',
     store: new Vuex.Store({ // <— Store モックを追記
       modules: {
         myData: {
           namespaced: true,
           state: {
             data: {
               message: 'ストアのデータだよ！'
             }
           },
           getters: {
             data: state => state.data
           }
         }
       }
     })
   })) 

以上です。

Storeモックを作ってあげることでStorybookでも正常に使えるようになりました。

あとがき

Nuxt.js を使った Storybook の事例や参考ページが少なくて非常に苦労しています。
ググるたびにReactの参考ページがたくさん表示されて「Reactにすべきだったか…」と心が折れそうになりました。

しかし、できなかったことができるようになると快感ですね。

The post 【Nuxt.js】VuexをStorybookで使う方法 first appeared on 頑張ることをやめたら人生楽しくなった.

• PC表示なら普通にページ遷移する
• SP表示ならページ遷移しないで何らかの処理を行う

…をやりたいと思いました。

しかも幅のサイズによってCSSでデザインを使い分けているため、できれば1つの nuxt-link でPCとSPで違う処理ができるようにしたかったのです。

問題点

nuxt-link で event.preventDefault() が使えない。

愕然としましたね。

解決策

 <template>
     <nut-link
       to=“/hoge”
       @click.native.prevent="trigger"
       event=""
       >リンク</nuxt-link
     >
 </template>
 
 <script>
 export default {
   name: ‘Hoge’,
   methods: {
     trigger(event) {
       if (window.matchMedia('(max-width: 599px)').matches) {
         // 何らかの処理
       } else {
         // 遷移
         this.$router.push({ path: event.target.pathname })
       }
     }
   }
 }
 </script> 

解説

nuxt-linkに event=“” を入れることでリンクを無効にすることができます。
そしてメソッドに trigger をつくり、スマホかPCかジャッジしてそれぞれの処理をするようにしています。

@click=”trigger” と入れるだけではクリックしてもメソッドが呼ばれません。
@click.native と “.native” をつけることでクリックした時にメソッドが呼ばれるようになります。

あとがき

数時間調べて答えが見つからず、諦めて力技で解決しました。
もっとクールな方法があれば教えてください…

The post nuxt-link を @click で制御したい！ first appeared on 頑張ることをやめたら人生楽しくなった.

<template lang="html">
  <p>{{ text }}</p>  
</template>

<script>
export default {
  data: function() {
    return {
      text: '吾輩は猫である。<br>名前はまだない。'
    }
  }
}
</script>

// 出力
吾輩は猫である。<br>名前はまだない。

データをHTML として出力するには、v-html ディレクティブを使用する必要があります。

<template lang="html">
  <p v-html=“text”></p>  
</template>
(略）

// 出力
吾輩は猫である。
名前はまだない。

このように、 v-html を使って簡単にできます。

参考にしたページ：Vue.js公式サイト

まとめ

取得したJSONデータの中にHTMLコードが含まれていて、どうしてもHTMlコードとして出力させたくて方法を1週間ほど調べていました。

どんなにググっても答えに辿り着けず、諦めかけていたころにVue.jsのテンプレート構文の説明をみつけました。このページは以前一度目を通したのですが、綺麗に忘れていました。

Vue.js 公式サイトの中に答えがあるとは…！！

見つけた時は嬉しいやら悔しいやら…複雑な気持ちでした。

The post 【Vue.js】データをHTMLコードとして出力するには v-html ディレクティブを使う first appeared on 頑張ることをやめたら人生楽しくなった.

以上の理由より、Storybook上で Nuxt のタグ nuxt-link がリンクと認識されるようにStorybookの設定を調整しました。

設定手順

環境

Nuxt: v2.8.1
@storybook/vue: v5.1.8
@storybook/addon-actions: v5.1.8

設定

インストール

まず、 @storybook/addon-actions をインストールします。

npm i -D @storybook/addon-actions

Storybook設定

次に、.storybook ディレクトリにある addons.js ファイルに1行書き加えます。

// /.storybook/addons.jsに1行追記
import '@storybook/addon-actions/register'

最後に、config.jsに import { action } from '@storybook/addon-actions を加えて nuxt-link コンポーネントをVueに登録します。

// /.storybook/config.js
import Vue from 'vue'

import { configure } from '@storybook/vue'
import { action } from '@storybook/addon-actions'

Vue.component('nuxt-link', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>',
})

const req = require.context('../src/stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

以上で設定終了です。

これでStorybook上で、すべてのnuxt-linkインスタンスがアンカー要素に置き換えられ、クリック可能なリンクが表示されるようになりました。
クリックするとActionsパネルにリンク情報が出力されます。

参考にしたページ

An (almost) comprehensive guide on using Storybook with Nuxt.js

The post `nuxt-link` タグのリンクをStorybook上で確認する方法 first appeared on 頑張ることをやめたら人生楽しくなった.

NuxtJSとは

Nuxt.js は Vue アプリケーションを作成するフレームワークです。

https://ja.nuxtjs.org/guide より引用

NuxtJSの新機能

コンポーネントを編集した時に、ブラウザの更新がわかるようになった

NuxtJSはコンポーネントを更新すると自動的にブラウザが更新されます。

しかし、本当に更新されたかどうかわからない時があります。

それが、バージョンアップしたことで、ブラウザの右下にNuxtのロゴを表示させることでコンポーネントの再構築が行われたことを教えてくれるようになりました。

とてもシンプルなことですが、嬉しい機能です。

ConsolaとSSRログでコンソールが見やすくなった

ブラウザのコンソールを整理し、見やすくするための機能です。

いままではブラウザのコンソールにログが流れて見にくいものでした。
ところが、この機能が加わったことで、ログがまとまって表示されるようになり見やすくなります。

`consola` というパッケージをインストールすることで使えるようになります。

Renderのアップデート

いくつかバグがあったRenderをアップデートしたようです。

進化するNuxtJSに追いつきたい

バージョンアップによってますます便利になったNuxtJSです。

自分のレベルがまだまだなので猛勉強して早く追いつきたい所存です。

The post NustJSが2.8.0にバージョンアップ！何ができるようになった？ first appeared on 頑張ることをやめたら人生楽しくなった.