投稿日：2020-07-12T23:49:29+09:00

Vueだったらこれできたら便利じゃない？シリーズ

Vue.jsプロジェクトにてデフォルトでやる作業内容メモ

いろいろなシステムをコーディングする上でこれはやっておきたい内容メモ

Vueでのv-forを使ったnavbar多言語対応

内容

言語対応を行い、ヘッダーにリストレンダリングにて多言語対応を行う。

前提条件

Vue-Routerの環境ができていること
Bootstrap-Vueの環境ができていること

プラグイン

npm install vue-i18n --save

変更ファイル一覧

main.js

// 多言語対応
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import { data } from '@/lib/lang/index.js'
const i18n = new VueI18n({
  locale: 'en', // デフォルト言語設定
  fallbackLocale: 'ja', // 選択中の言語に対応する文字列が存在しない場合はこの言語の文字列を使用する
  messages: data
})

new Vue({
  i18n: i18n,
})

lib/lang/index.js

import en from '@/lib/lang/TranslationsEn'
import jp from '@/lib/lang/TranslationsJp'

// jsonを結合する
var data = Object.assign(en, jp)

export { data }

lib/lang/TranslationsEn.js

export default {
  en: {
    Route: {
      About: 'About',
      Portfolio: 'Portfolio'
    }
  }
}

lib/lang/TranslationsJp.js

export default {
  ja: {
    Route: {
      About: 'アバウト',
      Portfolio: 'ポートフォリオ'
    }
  }
}

header.vue

<template>
  <div>
    <b-navbar>
      <b-navbar-brand href="/">hoge</b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item v-for="route in routes" :key="route.name" :to="route.path">
            <span v-if="route.path !== '/'">{{$t(route.name)}}</span>
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
import router from '@/router/index.js';

export default {
  name: 'header',
  data: () => ({
    routes: router.app._router.options.routes
  })
}
</script>

<style scoped>
/*  */
</style>

router/index.js

const routes = [
  {
    path: '/',
    name: 'Route.Home',
    component: Home
  },
  {
    path: '/about',
    name: 'Route.About',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/portfolio',
    name: 'Route.Portfolio',
    component: () => import('@/views/Portfolio.vue')
  }
]

相対パスではなく@からの絶対パスに変更

内容

何もしないと編集中のファイルからの相対パスになるが、[src]からの絶対パスにするために以下の編集を行う。

方法

vue.config.js

var path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
        '@': path.resolve(__dirname, 'src/'),
      },
    },
  }
}

システム共通設定configファイルの利用

内容

システムの設定ファイルを持たせる

方法

main.js

import tempConfig from '@/components/config.js'

new Vue({
  beforeCreate() {
    Object.keys(tempConfig.config).forEach((key) => {
      Vue.prototype['$' + key] = tempConfig.config[key]
    })
  },
}).$mount('#app')

components/config.js

export default {
  config: {
    sysId: 'temp',
    sysName: 'Template',
    user: { id: '01', name: 'administrator' }
  }
}

システムブラウザのタイトル変更

内容

しょうもないがシステムのタイトルがどこに記載されているかわからなくなったので、メモ

方法

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
    <title>タイトル！！</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T23:26:47+09:00

Vuetifyでダークとライトテーマを切り替える機能を実装する

下記の画像のように、Vuetifyでダーク（dark）とライト（light）テーマを切り替える機能を実装する方法です。

ダークとライトテーマを切り替える機能

<template>
  <div>
    <v-switch
      v-model="theme"
      :prepend-icon="themeIcon"
    ></v-switch>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      theme: true
    }
  },
  computed: {
    themeIcon(): string {
      return this.theme ? 'mdi-weather-night' : 'mdi-weather-sunny'
    }
  },
  watch: {
    theme() {
      this.$vuetify.theme.dark = this.theme
    }
  }
})
</script>

v-model="theme"として、watchで監視します。
this.$vuetify.theme.dark = true or falseでダークとライトテーマを切り替えています。

見栄えの為にcomputedでアイコンの変更も実装しています。

テーマごとのカラー設定

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {
  /*
   ** vuetify module configuration
   ** https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        light: {
          primary: colors.red.darken2,
          accent: colors.blue.darken3,
        }
      }
    }
  }
}

テーマごとのカラーの設定はnuxt.config.jsで行うことができます。

最後に

Vuetifyを使えば簡単にテーマの切り替えが実装できるので便利です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T22:14:47+09:00

vue.js/クラスバインドまとめ

new Vue({
  el: "#app",
  data: {
    isActive: true,
    isGreenBackActive: true
  },
  methods: {
    changeGreen: function() {
        this.isGreenBackActive = !this.isGreenBackActive
    }
  }

})

<div id="app">
<p :class="{ red: isActive, blue: !isActive, 'green-back': isGreenBackActive }">テキスト</p>
<button @click="isActive = !isActive">押す</button>
<button @click="changeGreen">背景を緑にする</button>
</div>

.red{
  color: red;
}
.blue{
  color: blue;
}
.green-back{
  background: green;
}

オブジェクトにまとめることもできる

  computed: {
    classObject: function(){
        return {
      red: this.isActive,
      blue: !this.isActive,
      'green-back': this.isGreenBackActive
      }
    }
  },

<p :class="classObject">テキスト</p>

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T20:38:49+09:00

Vue.js 3.0(beta 20) helloworld

Vue.js 2.x で書いた hello world を Vue.js 3.0 beta を使って書き換え

CDNを使ってHTMLファイルとして作っています。
Composition APIは使ってません。

Vue.js 2.x
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>hello world</title>
<div id="app">
  <p>{{ display }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: { display: 'Hello World!' }
  });
</script>
Vue.js 3.0.0-beta.20
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>hello world</title>
<div id="app">
  <p>{{ display }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.20/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data: () => ({
      display: 'Hello World!'
    })
  });
  app.mount('#app');
</script>
ポイント

Vueコンストラクタの代わりに、createAppを使います。

data オプションはコンポーネントと同様に、関数にする必要があります。

elオプションの代わりに、mountを使います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T20:09:51+09:00

【完全オリジナル改訂版】Vueフロントエンジニアがおすすめ！迷わないナビゲーションバーエフェクトまとめ２３選

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○

【直感的デザイン】cssで作るナビゲーションバーエフェクト３選

動きは下の画像のような感じになります

１. hoverしたボタンのみ背景色で強調するナビゲーションバーデザイン

２. 円を描くように720度回転＋拡大ナビゲーションバーデザイン

３. 360度横回転しながら拡大する直感的なナビゲーションバーデザイン

コードを確認する

transform:rotate(X,Y,Z,3d)で回転するナビゲーションバー４選

動きは下の画像のような感じになります

１. transform:rotateXとscaleで縦回転するナビゲーションバーデザイン

２. transform:rotateYとscaleで横回転するナビゲーションバーデザイン

３. transform:rotateZとscaleでくるっと回転するナビゲーションバーデザイン

４. transform:rotate3dとscaleで立体感のあるナビゲーションバーデザイン

コードを確認する

【CSSで作る】動くシンプルなナビゲーションバーデザイン３選

動きは下の画像のような感じになります

１. ちょっとエフェクト効いてるよくありがちなナビゲーションバーデザイン

２. くるっと回転してちょっと楽しいナビゲーションバーデザイン

３. 斜めに伸びてかわいいナビゲーションバーデザイン

コードを確認する

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選

動きは下の画像のような感じになります

１. ヘッダーで使いやすいシンプルなナビゲーションメニュー

２. ボタンが滑らかに拡大するかわいらしいナビゲーションメニュー

３. ボタンが縮小しながら立体的に浮き出るナビゲーションメニュー

4. ボタンが凹みながら縮小する超動くナビゲーションメニュー

コードを確認する

マウスオーバーでドロップダウンするナビゲーションメニュー３選

動きは下の画像のような感じになります

１. ドロップダウンするシンプルなナビゲーションメニュー

２. ボタンが浮く！独特でかわいいナビゲーションメニュー

３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. hoverするとボタンが浮き上がるナビゲーションメニュー

２. hoverするとボタンが凹むナビゲーションメニュー

３. hoverするとボタンが立体的に浮き出るナビゲーションメニュー

コードを確認する

初心者でも簡単！動きのあるナビゲーションバーデザイン３選

動きは下の画像のような感じになります

１. マウスオーバーで文字が太くなるナビゲーションバーデザイン

２. マウスオーバーで文字が傾くナビゲーションバーデザイン

３. transform: skew＋hoverでシンプルなナビゲーションバーデザイン

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T18:13:48+09:00

【Nuxt/Rails】formDataで画像をPOSTしてCarrierWaveで保存した

Nuxt.jsからformDataで画像をPOSTして、Railsで画像を保存する(CarrierWaveを使ってます)際に地味に詰まってしまったので備忘録を残します。

Rails

Google Cloud Storageに画像を保存していまして、設定諸々は以下の備忘録に書いてます。

https://qiita.com/arthur_foreign/items/43da529ab3beb760ba4b

※そのため、CarrierWaveの設定周りは省略しました。

また、実装としては記事のサムネイルを保存することとします。

model
article.rb
class Article < ApplicationRecord
  belongs_to :user
  mount_uploader :thumbnail, ImageUploader
  serialize :thumbnail
end
controller
articles_controller.rb
class ArticlesController < ApplicationController
  def create
    article_form = ArticleForm.new(article_form_params)
    if article_form.invalid?
      render_422(article_form)
    else
      @article = article_form.save!
      render json: @article, status: :ok, serializer: ArticleSerializer
    end
  end
end
serializer
article_serializer.rb
class ArticleSerializer < ActiveModel::Serializer
  attributes :thumbnail
  belongs_to :user, serializer: UserSerializer
end
form
article_form.rb
class ArticleForm
  include ActiveModel::Model
  include Virtus.model

  attr_reader :thumbnail, :user_id

  attribute :thumbnail, String
  attribute :user_id, User

  def save!
    Article.create!(
      thumbnail: thumbnail,
      user_id: user_id
    )
  end
end
Vue/Nuxt

画像を送信する時のformDataのみ書いてます。
<script>
  methods: {
    async handleSubmit() {
      const formData = new FormData()
      const blob = new Blob([this.image], { type: this.thumbnailType })
      formData.append('article[thumbnail]', blob, this.thumbnailName)
      await this.postArticle(formData)
    },
  },
</script>
※画像の設定は別の備忘録に書こうと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T17:53:36+09:00

Vue.jsでpropsとスタイルを紐付けるやり方

普段VuetifyやIonicとったコンポーネントライブラリを使うのに慣れてるから、コンポーネント間のデータのやり取りやイベントは書ける。
けど、それをどうスタイルに紐付ければいいのか分からないってことありませんか？
<DemoButton color="primary" large icon outlined />
上記の

color

large

icon

outlined

っていう4つのpropsをどうスタイルに紐づけるか？
スタイルも意識したコンポーネントの作成をしてみましょう。

TL;DR

colorのようにを値の種類が複数あるものは style で上書き
outlined のようにtrue/falseの真偽値で表せるものは class を付与

コンポーネントの全体コード

動作環境としてはTypeScript化したNuxt.jsですが、概念を伝えるのが目的なので環境設定等は省略します。悪しからず。
DemoButton.vue
<template>
  <button type="button" :class="classes" :disabled="disabled" :style="styles">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "DemoButton",
  props: {
    color: {
      type: String,
      required: false,
      default: "primary"
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    outlined: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    styles () {
      //validateColorは @/assets/scss/_variable.scss で定義した色が指定されているかどうか確かめる為に作った関数
      return {
        '--color': validateColor(this.color),
      } 
    }, 
    // バインドするクラスを生成
    classes() {
      return {
        "demo-btn": true,
        "demo-btn--outlined": this.outlined
      };
    }
  }
});
</script>
<style lang="scss" scoped>
.demo-btn {
  // デフォルトの背景色
  --color: yellow;
  // CSS変数を背景色に割り当て
  background-color: var(--color);
}
.demo-btn--outlined {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px;
  border-radius: 4px;
  background-color: transparent;
}
</style>
値のパターンをを複数もつprops

上記のコードで言うと color が該当します。
この引数は

primary

secondary

green

error

など様々な文字列を取る可能性があります。なのでこの場合は、
引数で指定された値を後からstyle属性で上書きする
という方法を使います。
.demo-btn {
  // デフォルトの背景色
  --color: yellow;
  // CSS変数を背景色に割り当て
  background-color: var(--color);
}
CSS変数でデフォルト値を設定しておき
<button type="button" :class="classes" :disabled="disabled" :style="styles">
styles () {
      /*validateColorは @/assets/scss/_variable.scss
                       で定義した色が指定されているかどうか確かめる為に作った関数*/
      return {
        '--color': validateColor(this.color),
      } 
    }
style属性に後から代入して上書きしています。

値が真偽値の2パターンしかないprops

こちらは簡単です。
引数が指定された場合のみそれに対応するクラスをコンポーネントに付与するだけです。
<button type="button" :class="classes" :disabled="disabled" :style="styles">
<script lang="ts">
props: {
    outlined: {
      type: Boolean,
      required: false,
      default: false
    }
classes() {
      return {
        "demo-btn": true,
        "demo-btn--outlined": this.outlined
      };
    }
</script>
<style lang="scss" scoped>
.demo-btn {
  // ...
}
.demo-btn--outlined {
  // ....
}
</style>
最後に

コンポーネントライブラリを作ってみよう！ってなっても、スタイルどうすればいいの？って人に少しでも参考になれば幸いです。

参考ページのリンクを貼っておきます

Vue.jsでコンポーネント作るときにCSS変数つかったら色々できる

Vuetifyのbuttonコンポーネントのtsコード

Vuetifyのbuttonコンポーネントのsassコード

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T17:53:36+09:00

Vue.jsでpropsとスタイルを動的に紐付けるやり方

普段VuetifyやIonicとったコンポーネントライブラリを使うのに慣れてるから、コンポーネント間のデータのやり取りやイベントは書ける。
けど、それをどうスタイルに紐付ければいいのか分からないってことありませんか？
<DemoButton color="primary" large icon outlined />
上記の

color

large

icon

outlined

っていう4つのpropsをどうスタイルに紐づけるか？
スタイルも意識したコンポーネントの作成をしてみましょう。

TL;DR

colorのようにを値の種類が複数あるものは style で上書き
outlined のようにtrue/falseの真偽値で表せるものは class を付与

コンポーネントの全体コード

動作環境としてはTypeScript化したNuxt.jsですが、概念を伝えるのが目的なので環境設定等は省略します。悪しからず。
DemoButton.vue
<template>
  <button type="button" :class="classes" :disabled="disabled" :style="styles">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "DemoButton",
  props: {
    color: {
      type: String,
      required: false,
      default: "primary"
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    outlined: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    styles () {
      //validateColorは @/assets/scss/_variable.scss で定義した色が指定されているかどうか確かめる為に作った関数
      return {
        '--color': validateColor(this.color),
      } 
    }, 
    // バインドするクラスを生成
    classes() {
      return {
        "demo-btn": true,
        "demo-btn--outlined": this.outlined
      };
    }
  }
});
</script>
<style lang="scss" scoped>
.demo-btn {
  // デフォルトの背景色
  --color: yellow;
  // CSS変数を背景色に割り当て
  background-color: var(--color);
}
.demo-btn--outlined {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px;
  border-radius: 4px;
  background-color: transparent;
}
</style>
値のパターンをを複数もつprops

上記のコードで言うと color が該当します。
この引数は

primary

secondary

green

error

など様々な文字列を取る可能性があります。なのでこの場合は、
引数で指定された値を後からstyle属性で上書きする
という方法を使います。
.demo-btn {
  // デフォルトの背景色
  --color: yellow;
  // CSS変数を背景色に割り当て
  background-color: var(--color);
}
CSS変数でデフォルト値を設定しておき
<button type="button" :class="classes" :disabled="disabled" :style="styles">
styles () {
      /*validateColorは @/assets/scss/_variable.scss
                       で定義した色が指定されているかどうか確かめる為に作った関数*/
      return {
        '--color': validateColor(this.color),
      } 
    }
style属性に後から代入して上書きしています。

値が真偽値の2パターンしかないprops

こちらは簡単です。
引数が指定された場合のみそれに対応するクラスをコンポーネントに付与するだけです。
<button type="button" :class="classes" :disabled="disabled" :style="styles">
<script lang="ts">
props: {
    outlined: {
      type: Boolean,
      required: false,
      default: false
    }
classes() {
      return {
        "demo-btn": true,
        "demo-btn--outlined": this.outlined
      };
    }
</script>
<style lang="scss" scoped>
.demo-btn {
  // ...
}
.demo-btn--outlined {
  // ....
}
</style>
最後に

コンポーネントライブラリを作ってみよう！ってなっても、スタイルどうすればいいの？って人に少しでも参考になれば幸いです。

参考ページのリンクを貼っておきます

Vue.jsでコンポーネント作るときにCSS変数つかったら色々できる

Vuetifyのbuttonコンポーネントのtsコード

Vuetifyのbuttonコンポーネントのsassコード

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T17:29:40+09:00

Vue.jsでdt、ddタグをv-forループで作る

dlタグをv-forループで生成するのは簡単ですよね

<template>
  <dl v-for="item in items">
    <dt>{{ item.name }}</dt>
    <dd>{{ item.description }}</dt>
  </dl>
</template>

↓

<dl>
  <dt>えるしつているか</dt>
  <dd>りんごしかたべない</dt>
</dl>
<dl>
  <dt>死神は</dt>
  <dd>手が赤い</dt>
</dl>

でも一つのdlタグの中でdtとddを複数個作りたい時ありますよね。
むしろそっちが大多数かなと。

こうします。

<template>
  <dl>
    <template v-for="item in items">
      <dt>{{ item.name }}</dt>
      <dd>{{ item.description }}</dt>
    </template>
  </dl>
</template>

↓

<dl>
  <dt>えるしつているか</dt>
  <dd>りんごしかたべない</dt>
  <dt>死神は</dt>
  <dd>手が赤い</dt>
</dl>

templateタグの中でtemplateタグを使えることを知りませんでした。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T17:10:00+09:00

Vue Router利用のための最低限の実装

Vue Routerをとりあえず導入して、最低限の動きを見るまでの手順メモです。

Vue Routerはシンプルに使うことができて大変便利ですが、
本当はもっと複雑な設定もできる奥深いプラグインみたいです。

Vue Routerとは

Vue.jsの公式プラグイン

SPAを構築するためのルーティングライブラリ

クライアントの履歴管理を含めたページ遷移（＝ルーティング管理）やデータ取得・描画の機能を担ってくれます。
（何を言っているのかよくわかっていません）

Vue Router 導入

既存のプロジェクトにインストールします。
npm install vue-router
※ 新規プロジェクトの場合、vue createの際にvue-routerも併せて導入できるようです。

Vue Routerの設定

srcフォルダ配下に「router.js」という新規JSファイルを作成し、Vue Routerの設定を書いていきます。
main.jsに書いても問題ないですが、なるべく疎にしておきます。
router.js
//import
import Vue from 'vue';
import router from 'vue-router';

//1.component読み込み
import top from "./components/top"
import end from "./components/end"

//vue-routerをインストール
Vue.use(router);

//2.routerの設定とインスタンス生成
export default new router({
  routes:[
    {
      path: "/", //トップページ
      component:top
      },

      {
      path: "/end", //終点ページ
      component:end
      }  
  ]
});
1.component読み込み

routerで表示を制御したいコンポーネントをimportしておきます。
参考までに、topとendの中身はこんな感じです。
top.vue
<template>
  <div id="app">
    トップ
  </div>
</template>
end.vue
<template>
  <div id="app">
    終点
  </div>
</template>
2.routerの設定とインスタンス生成

他にも様々な設定が可能ですが、今回はroutesのみ設定します。
ここでURLとコンポーネントの組み合わせを定義できます。

今回の例だと、URLが
"~xxx/"のときはtopコンポーネントが描画され、
"~xxx/end"のときはendコンポーネントが描画されます。

main.jsで読み込む

上記で作成したrouter.jsをmain.jsで読み込みます。
main.js
import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
以上でRouterの設定は完了です。

親コンポーネント側の設定

あとはこれを受けるための要素を親コンポーネント側で用意します。

今回は「App.vue」の特定の部分にtopコンポーネントとendコンポーネントを出し分けしたいので、
App.vueの中にrouter-view要素を書いておきます

以下の<router-view></router-view>の部分に、routesで設定したコンポーネントが描画されます。
App.vue
<template>
  <div id="app">

    <router-link to="/">トップページ</router-link><br>
    <router-link to="/end">終点ページ</router-link>
    

    <router-view></router-view>
    

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
router-viewだけだとアドレスバー直打ちで遷移する羽目になるので、
<router-link to="xxx">でリンクを表示して、ページ遷移できるようにしています。

動かす

localhostで動かしてみます。

初期表示

「終点ページ」押下

「終点ページ」押下後、「トップページ」押下

※routerの設定でmodeをhistoryにすると、URLの#が消えていい感じになるようです。

参考

[Vue.js] vue-routerのhashモードとhistoryモードの違いをざっくり理解する

【Vue.js】vue-routerの基礎をサンプルを用いて解説

『Vue.js入門基礎から実践アプリケーション開発まで』/技術評論社

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T01:43:13+09:00

Vue.jsのcomputedプロパティで引数を受け取る

そもそも引数とは

プログラムや関数に渡す値のこと。値を渡すことによってその値によってif文を書いたり必要な情報をプログラム内で使用することができる。最初のうちは引数を利用することは結構少ないかも。

HTMLからScriptに引数を渡す

method内での引数の渡し方

ブラウザに設置されたボタンをクリックしたらeventっていう関数が実行される文を書きました。引数には文字列を含ませてあります。
html
<template>
  <div>
    <button @click="event('引数だよ！')">
    </button>
  </div>
</template>
文字列の引数にvalueという名前で引数の情報を受け取ります。
ちゃんと受け取れていればvalueの中には引数だよ！っていう文字列が入っているはずです。
vue.js
<script>
export default {
  methods: {
    event (value) {
      console.log(value)
    }
  }
}
</script>
ボタンを押した時の結果です。ちゃんと文字列が受け取れています。

computedプロパティないで引数を受け取る方法

methodsの時とおなじ要領でcomputed内で引数を受け取ろうとすると次の様な値が返ってきます。
この値も必要になるときは来るのですが、現段階で欲しい情報は文字列です。

じゃあどうするか

computed内に記載した関数の返り値に別の関数を定義し別の関数内で引数を受け取ることによって欲しい情報を取得することができます。
vue.js
<script>
export default {
  computed: {
    event () {
      return function (value) {
        return console.log(value)
      }
    }
  }
}
</script>
この様にしてcomputed内でも欲しい引数を取得することができました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-12T00:17:47+09:00

Nuxt.js入門

nuxt入門

Nuxt.jsに入門してみましたので投稿します。

環境

Ubuntu(WSL Windows10 Home)を使っています。ここに作っていきます。

category value

platform Ubuntu 18.04.4 LTS (WSL)

Package Manager npm 6.14.4

JavaScript Node.js v12.17.0

frameworks @nuxt/cli v2.13.2

@nuxtjs/vuetify 1.11.2

準備

開発環境を作成するには、node.js, npmをインストールするだけです。
sudo apt install -y nodejs npm
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
参考サイト： Ubuntuに最新のNode.jsを難なくインストールする

これで準備は完了しました。

Project作成

(1) npxでprojectを作成する

nuxtjsでは、npx create-nuxt-appでプロジェクトを作成します。いくつか質問をされますが、今回、私は以下のとおり選択してます。
npx create-nuxt-app nuxt-first-app
? Project name: nuxt-first-app
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code)

・・・・・しばらく時間がかかります。・・・・・

?  Successfully created project nuxt-first-app
(2) 起動

完了したら以下のコマンド実行して起動します。
cd nuxt-first-app
npm run dev

・・・・・しばらく時間がかかります。・・・・・

ℹ Waiting for file changes              
ℹ Memory usage: 423 MB (RSS: 533 MB)    
ℹ Listening on: http://localhost:3000/  
(3) 確認

起動できたら、http://localhost:3000/ にアクセスします。

Nuxt.jsでは、このプロジェクトをカスタマイズして自分用のアプリを作成していきます。

修正

warningがでてます。
WARN  [Vuetify] [UPGRADE] 'v-content' is deprecated, use 'v-main' 
warningなので必須ではないと思いますが気持ち悪いので修正しておきましょう。

(1) projectのフォルダ・ファイル構成

修正するために、まずはプロジェクトのフォルダ・ファイル構成を確認しておきましょう。(READMEは省略)
├── assets
│   └── variables.scss
├── components
│   ├── Logo.vue
│   └── VuetifyLogo.vue
├── layouts
│   ├── default.vue
│   └── error.vue
├── middleware
├── pages
│   ├── index.vue
│   └── inspire.vue
├── plugins
├── static
│   ├── favicon.ico
│   ├── v.png
│   └── vuetify-logo.svg
├── store
├── jsconfig.json
├── nuxt.config.js
├── package-lock.json
└── package.json
(2) 修正

この中で、「v-content」を含むファイルを探すと、「layouts/default.vue」（60行目付近）にありました。「v-content」を「v-main」に変更しておきます。
layouts/default.vue
<template>
・・・
-   <v-content>
+   <v-main>
      <v-container>
        <nuxt />
      </v-container>
-   </v-content>
+   </v-main>
(3) 修正後の確認

再起動して確認し、warningが消えていたら成功です。

ページを追加する

ワーニングを修正したので、このプロジェクトをカスタマイズしてみましょう。公式ページに書いているように、Nuxt.js は pages ディレクトリ内の Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成します。

ということで、pagesディレクトリのVueファイルを作成するだけでroutingが完了します。これはかなり便利です。

(1) ページを作成する

例として、pagesディレクトリの下に「about.vue」を作成し、以下のように編集します。
pages/about.vue
<template>
  <v-layout
    column
    justify-center
    align-center
  >
    <v-flex
      xs12
      sm8
      md6
    >
    <h1>about</h1>
    </v-flex>
  </v-layout>
</template>
(2) 確認

起動してhttp://localhost:3000/about にアクセスします。「about」が表示されればOKです。

とても簡単ですね。

画面遷移

ページを作成する方法が分かったので、次は画面にページ遷移を実装してみましょう。「layouts/default.vue」を開いて「<v-toolbar-title>」の下に以下のように編集してみます。
layouts/default.vue
<template>
  <v-app dark>
  ・・・
    <v-app-bar
      :clipped-left="clipped"
      fixed
      app
    >  
  ・・・
      <v-toolbar-title v-text="title" />
      <v-spacer />
      <nuxt-link to="/" class="ma-2">home</nuxt-link>      
      <nuxt-link to="/about" class="ma-2">about</nuxt-link> 
  ・・・
表示してみると、タイトルバーに「HOME」「ABOUT」のリンクボタンがあると思います。ボタンを押して画面に遷移できることを確認してみてください。これで画面遷移もOKです。

まとめ

この辺で入門については終わります。WEBアプリケーションを簡単に作成できます。Nuxt.jsは非常にいいですね。

category	value
platform	Ubuntu 18.04.4 LTS (WSL)
Package Manager	npm 6.14.4
JavaScript	Node.js v12.17.0
frameworks	@nuxt/cli v2.13.2
	@nuxtjs/vuetify 1.11.2

　 Tweet
Qiitaで続きを読む

20200712のvue.jsに関する記事は12件です。

Vueだったらこれできたら便利じゃない？シリーズ

Vue.jsプロジェクトにてデフォルトでやる作業内容メモ

Vueでのv-forを使ったnavbar多言語対応

内容

前提条件

プラグイン

変更ファイル一覧

相対パスではなく@からの絶対パスに変更

内容

方法

システム共通設定configファイルの利用

内容

方法

システムブラウザのタイトル変更

内容

方法

Vuetifyでダークとライトテーマを切り替える機能を実装する

ダークとライトテーマを切り替える機能

テーマごとのカラー設定

最後に

vue.js/クラスバインドまとめ

Vue.js 3.0(beta 20) helloworld

Vue.js 2.x で書いた hello world を Vue.js 3.0 beta を使って書き換え

Vue.js 2.x

Vue.js 3.0.0-beta.20

ポイント

【完全オリジナル改訂版】Vueフロントエンジニアがおすすめ！迷わないナビゲーションバーエフェクトまとめ２３選

【直感的デザイン】cssで作るナビゲーションバーエフェクト３選

１. hoverしたボタンのみ背景色で強調するナビゲーションバーデザイン

２. 円を描くように720度回転＋拡大ナビゲーションバーデザイン

３. 360度横回転しながら拡大する直感的なナビゲーションバーデザイン

コードを確認する

transform:rotate(X,Y,Z,3d)で回転するナビゲーションバー４選

１. transform:rotateXとscaleで縦回転するナビゲーションバーデザイン

２. transform:rotateYとscaleで横回転するナビゲーションバーデザイン

３. transform:rotateZとscaleでくるっと回転するナビゲーションバーデザイン

４. transform:rotate3dとscaleで立体感のあるナビゲーションバーデザイン

コードを確認する

【CSSで作る】動くシンプルなナビゲーションバーデザイン３選

１. ちょっとエフェクト効いてるよくありがちなナビゲーションバーデザイン

２. くるっと回転してちょっと楽しいナビゲーションバーデザイン

３. 斜めに伸びてかわいいナビゲーションバーデザイン

コードを確認する

ヘッダーデザインにコピペで使えるナビゲーションメニュー４選

１. ヘッダーで使いやすいシンプルなナビゲーションメニュー

２. ボタンが滑らかに拡大するかわいらしいナビゲーションメニュー

３. ボタンが縮小しながら立体的に浮き出るナビゲーションメニュー

4. ボタンが凹みながら縮小する超動くナビゲーションメニュー

コードを確認する

マウスオーバーでドロップダウンするナビゲーションメニュー３選

１. ドロップダウンするシンプルなナビゲーションメニュー

２. ボタンが浮く！独特でかわいいナビゲーションメニュー

３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

１. hoverするとボタンが浮き上がるナビゲーションメニュー

２. hoverするとボタンが凹むナビゲーションメニュー

３. hoverするとボタンが立体的に浮き出るナビゲーションメニュー

コードを確認する

初心者でも簡単！動きのあるナビゲーションバーデザイン３選

１. マウスオーバーで文字が太くなるナビゲーションバーデザイン

２. マウスオーバーで文字が傾くナビゲーションバーデザイン

３. transform: skew＋hoverでシンプルなナビゲーションバーデザイン

コードを確認する

【Nuxt/Rails】formDataで画像をPOSTしてCarrierWaveで保存した

Rails

model

controller

serializer

form

Vue/Nuxt

Vue.jsでpropsとスタイルを紐付けるやり方

TL;DR

コンポーネントの全体コード

値のパターンをを複数もつprops

値が真偽値の2パターンしかないprops

最後に

Vue.jsでpropsとスタイルを動的に紐付けるやり方

TL;DR