Ver.3.xと最新のVer.6.xで違いがあったのでメモ
const now = new Date();
const midnight = d3.utcDay.floor(now);const now = new Date();
const midnight = d3.time.day.utc.floor(now);APIの使用が変わったらしく、最新バージョンでは、d3.time.*は使えない
$ npm install -D pixi.js
$ npm install -D @types/pixi.js$ npm install terser-webpack-plugin --save-devライブラリの読み込み
const TerserPlugin = require('terser-webpack-plugin');プラグインの読み込み
module.exports = {
//module.exports = ( env, argv ) => ({
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};$ npm install -D @vimeo/player<template>
<iframe
src="https://player.vimeo.com/video/vimeoid"
width="640"
height="360"
frameborder="0"
allowfullscreen
></iframe>
</template>※vimeid部分は任意で指定
<script>
import Player from "@vimeo/player";
export default {
mounted: function() {
var iframe = document.querySelector("iframe");
var player = new Player(iframe);
player.on("play", function() {
console.log("Played the video");
});
player.on("ended", function() {
console.log("Ended the video");
});
player.getVideoTitle().then(function(title) {
console.log("title:", title);
});
}
};
</script>モジュールのインポート
import Player from "@vimeo/player";Vimeoプレイヤーへのアクセス<iframe>タグからSDK経由でプレイヤーを取得する
var iframe = document.querySelector("iframe");
var player = new Player(iframe);イベントの設定とメソッド実行
player.on("play", function() {
console.log("Played the video");
});
player.on("ended", function() {
console.log("Ended the video");
});
player.getVideoTitle().then(function(title) {
console.log("title:", title);
});.vueファイル内で
methods: {
signOut() {
firebase
.auth()
.signOut()
.then(() => {
this.$router.push("/login");
this.$store.commit("/user/setIsLogin", false);
});
},
},firebase.auth().signOut()でサインアウトできる。
上の例では、処理後、
にしている。
<template v-slot:item.actions="{ item }">
<v-btn :to="`desserts/${item.id}`" nuxt icon>
<v-icon small>mdi-pencil</v-icon>
</v-btn>
</template>:to<v-btn>に、Vue Routerのリンクをつくるには、:toスロットを使う
上の例では、/dessets/_id.vueへのリンクを生成している。(_idの部分は、${item.id}が自動的に置換される)
nuxt
nuxt-linkを有効にする
icon
icon表示型のボタンを生成する
DataTableの列幅は、slotで流し込むheadersの中で指定できる。
<v-data-table :headers="headers" :items="itemlist">data() {
return {
headers: [
{ text: "ColA", value: "cola", width: "10%" },
{ text: "ColB", value: "colb", width: "80%" },
{ text: "ColC", value: "cols", width: "10%" },
],
}
}ここでは、%で指定しているが、ピクセルでも指定できるらしい。レスポンシブを考えると、%の方が良いかもしれない。
Via! https://sugimotonote.com/2019/03/12/post-1336/
@nuxtjs/google-analytics
https://www.npmjs.com/package/@nuxtjs/google-analytics
というモジュールを使う
yarn add --dev @nuxtjs/google-analytics以下、追加
export default {
build: {
buildModules: ["@nuxtjs/google-analytics"],
googleAnalytics: {
id: "UA-12301-2"
}
}
}idは、各自のものに書き換える。
Nuxt.JSのSPAなコンテンツをVercelで公開するのを前提に、環境変数を設定する方法。callbackのURLを開発環境とProduction（本番）環境で自動的に切り替えるのに便利。
例えば、callbackされるURLを以下のように切り替える場合など
#開発環境
http://localhost:8080/callback
#本番環境
http://foobar.app/callback開発環境と本番環境で切り替えたい内容は、dotenvというライブラリで管理する。yarnでインストール（npmでもOK）
$ yarn add --dev @nuxtjs/dotenvプロジェクトのルートディレクトリに、.envファイルを作り、開発環境時の環境変数を指定する。本番環境用の値は、後ほど、Vercelの設定画面で設定する。
REDIRECT_URI="http://localhost:8080/callback".envファイルを複数作り、環境によって切り替える方法もあるが、Nuxt.jsの公式では、単一の.envファイルの使用を推奨。
.envで設定した値は、セキュリティー上、公開されない方が良い場合も考えられるので、git管理下には置かない。
#以下、追加
.env以下、追加
require("dotenv").config();
const { REDIRECT_URI } = process.env; #使用する環境変数名
#以下は、export default 内に
export default {
buildModules: ["@nuxtjs/dotenv"],
env: {
REDIRECT_URI #使用する環境変数名
}
}export default {
data() {
return {
redirectURI: process.env.REDIRECT_URI
};
}
}Vercelでは、環境変数の値を設定し、build時に自動的に埋め込める機能がある。これを使って、本番環境の値を入れ込む。
設定したいプロジェクトの「Settings」を選ぶ。
画面後半にあるEnvironment Variablesで、環境変数名と値を登録する。なお、登録された値は暗号化されるので、表示＆確認することはできないので注意。
次回ビルドされたときに、登録した値に置換される。
https://crieit.net/posts/Vercel–Zeit-Now-Nuxt-js-2020
https://qiita.com/taichi0514/items/3939af222dee21a44413https://blog.ikedaosushi.com/entry/2019/04/17/220317
https://qiita.com/yfujii1127/items/c77bff6f0177b4ff219e
CopyWebpackPluginを使って、build時に、JSONファイルなどをバンドルせずに、単体でコピーする方法。
$ npm i -S copy-webpack-plugin write-file-webpack-pluginfile-webpack-pluginを入れることで、debug時に、実際のdistディレクトリにも書き出されるようになります。
importを追加
const CopyFilePlugin = require("copy-webpack-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");pluginの項目に追加
new CopyFilePlugin(
[
{
context: "src",
from: "**/*.json",
to: path.resolve(__dirname, "dist")
}
],
{ copyUnmodified: true }
),
new WriteFilePlugin()src以下のJSONファイルをdist以下にコピーするという設定。contextで、対象となるディレクトリ／ファイルの親ディレクトリを指定。
https://qiita.com/pepoipod/items/e41105e8f3afd47dc01c
https://codeday.me/jp/qa/20190515/828253.html