NUXT_ENV_IMG_URL='https://hoge.com:10000/v1/json'export default {
computed: {
img: () => {
return (
process.env.NUXT_ENV_IMG_URL + "foo.png"
);
},
}
}Nuxtでは、プロジェクトのルートフォルダに置く.envで、環境変数を設定できる。ただし、prefixでNUXT_ENV_を変数名に付けないと、コンポーネントから参照できない。
コンポーネントからは、process.env.NUXT_ENV_*の形で参照できる。
公式ドキュメント
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/
export default {
// ...
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'something',
htmlAttrs: {
lang: 'en'
},
bodyAttrs: {
class: 'hoge-class'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
//...
}Nuxtでは、HTMLタグやBODYタグが自動生成されてしまうため、classを直接指定出来ないが、nuxt.config.js内でクラスを指定できる。
FullCalendarが5.xへバージョンアップした際に、いくつかのAPIが廃止されて、新しい設定方法が必要になっている。曜日の表記方法の指定の仕方も、変更されている。
曜日を設定するには、dayHeaderFormatという設定項目に、ファンクションを渡す。
dayHeaderFormat: function (date) {
const days = ["日", "月", "火", "水", "木", "金", "土"];
return days[date.date.marker.getDay()];
},daysという配列に、日曜からの表示したい文字列を入れていく。このメソッドに、渡されるdataの中に、該当の日付情報が入ってくるので、その中から何曜日かをdate.date.marker.getDay()から取得し、キーとして配列から文字列を取得し、返すようにする。
Nuxt(Vue)で、FullCalendarを使うには、vueコンポーネントの<template>内に、コンポーネントとして以下の様に読み込む。
<template>
<div>
<FullCalendar :options="config" >
</div>
</template>Vuexと連携して、FullCalendarの内容を更新するには、optionsで指定するmodelをcomputedで動的に返す必要がある。
例えば、eventsというstoreの中にスケジュールデータが入っており、getterからスケジュールデータを取得する場合、configOptionsの返値の中のeventsで、storeのgetterを与えるようにする。
computed: {
config() {
return {
...this.configOptions,
};
},
configOptions() {
return {
firstDay: 1,
editable: false,
navLinks: false,
selectable: false,
events: this.events,
weekends: this.weekendsVisible,
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
}
}
//...
...mapGetters("events", ["events"]),
}詳しくは、こちらのコードを参照
https://github.com/fullcalendar/fullcalendar-example-projects
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表示型のボタンを生成する