font-weight を指定しないといけない場合がある
参考:
updated: 2018/9/13
Navigation-drawerを子componentで使用したいため、default の data: drawer を親子間で共有したいため、
mixinを使ってcomputed: {drawer: true} で共有した。
すると下記のエラー
Computed property “drawer” was assigned to but it has no setter
以下で解決
----------------------------------------------------------------------------------------
@Header.vue (子component)
<v-toolbar-side-icon @click="switch1"></v-toolbar-side-icon>
import { VuetifyMixin } from '../../mixins/VuetifyMixin.js'
methods: {
switch1() {
this.$store.dispatch('forVuetify_switchDrawer')
}
}
@PageBody.vue (親component)
<v-navigation-drawer
fixed
clipped
:value.sync="drawer"
app
>
import { VuetifyMixin } from '../../mixins/VuetifyMixin.js'
@VuetifyMixin.js
export const VuetifyMixin = {
computed: {
drawer() {
return this.$store.state.forVuetify.drawer
}
},
}
Vuex
const state = {
drawer: false
};
const mutations = {
'SWITCH_DRAWER' (state)
{
state.drawer = !state.drawer
}
};
const actions = {
forVuetify_switchDrawer({ commit })
{
commit('SWITCH_DRAWER');
}
};
export default {
state,
mutations,
actions
}
参考:
UPDATED:
over-lay をnavigation-drawer に使った場合、over-lay 部分をクリックした際のイベントinput により、drawer の値に誤作動が出る。over-lay を使用しない、または over-lay を自分で実装すれば回避できるが手間なので今回は component を separate しないでオリジナルの data: { drawer: bool } で管理することにする。
UPDATED:
vuesax を使ってみたらsidenavbar のモバイルでのスワイプでの挙動が vuetify より優れていたのでそちらに変更。(vuetifyのsidebarのtoggleの応答速度が悪い)
参考:
updated: 2022/2/18
より良い方法:
blade template 内の vue component にデータをパスしたい場合
例えば
authHome.blade.php / guestHome.blade.php
の二つに共通で PageBody.vue という vue component を使うとき、Laravel 側で Auth::checkして得た情報を PageBody にパスしたい場合
router 側でAuth::check の結果で表示する view を切り替える。
@authHome.blade.php / guestHome.blade.php
@extends('layouts.app')
@section('content')
<div id="app">
<pageBody></pageBody>
</div>
@endsection
blade template から直接 vue component にデータをパスすることはできないのでブラウザのセッションストレージを使う。
@authHome.blade.php
@extends('layouts.app')
@section('content')
<div id="app">
<pageBody></pageBody>
</div>
<script>
sessionStorage.clear();
sessionStorage.setItem("guest", "false");
</script>
@endsection
@guestHome.blade.php
@extends('layouts.app')
@section('content')
<div id="app">
<pageBody></pageBody>
</div>
<script>
sessionStorage.clear();
sessionStorage.setItem("guest", "true");
</script>
@endsection
@PageBody.vue
<script>
export default {
data() {
return {
auth: ""
}
},
beforeMount() {
this.auth = sessionStorage.getItem("guest");
}
これで vue component 側に auth 情報がパスできたので 例えば v-if 等で login logout register 等の header を切り替えることが出来るようになる。
laravel-mix@2.1.11
vue-loader@15.3.0
vue-loader を @14.2.2 から @15.3.0 にアップでしたらエラーが発生
solution:
webpack.mix.js にプラグインを適用
let mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
mix.webpackConfig({
plugins: [
new VueLoaderPlugin()
]
});
参照:
また、vue-loader を @14.2.2 から @15.3.0 にアップデートしたら yarn run watch 時の下記のエラーメッセージが発生しなくなった。
No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
yarn の全てのコマンドをした時のエラーメッセージ
yarn
uses deprecated new Buffer()
constructor and causes deprecation warnings when run with NODE_PENDING_DEPRECATION=1
.
上記も発生しなくなった。
updated: 2018/8/4
cloud9 では初めから Nginx がインストールされている。
初期設定ではポートが 80 になっている。cloud9 で使用できるポートは 8080, 8081, 8082 なので 設定を変える。
@/etc/nginx/sites-available
sudo nano default
>>>
server {
listen 8081 default_server;
listen [::]:8081 default_server ipv6only=on;
root /usr/share/nginx/html;
index index.html index.htm;
設定を変えたら
sudo nginx
>>> ポート8081 でサーバーが立ち上がる。
ポートを指定しないと No application running になるが
先ほど設定した8081をポート指定して
YOUR_CLOUD9_URL:8081 にアクセスすると Welcome to nginx! が表示されて設定完了。
conf ファイルにエラーがあるとnginx コマンドをしてもエラーメッセージが出て正常動作しないのでエラー取りが必要。