2023/02/18 ~ 2023/02/24 のもくもく日記

もくもく前回までは

2023/02/11 ~ 2023/02/17 のもくもく日記をご覧ください。

途中経過

その１

Pure.css のpure-menu-selected とVue.js 3.x のRouterLink を組み合わせるには、Vue Router の公式ドキュメントが参考になり……そう？

試しに書いてみたら、行けたかも。

<nav>
    <div class="pure-menu">
        <ul class="pure-menu-list">
            <template v-for="item in router.getRoutes()" :key="item.path">
                <RouterLink :to="item.path" v-slot="{ href, route, navigate, isActive, isExactActive }">
                    <li class="pure-menu-item" :class="[isActive && 'pure-menu-selected router-link-active', isExactActive && 'router-link-exact-active']">
                        <a :href="href" @click="navigate" class="pure-menu-link">{{ route.name }}</a>
                    </li>
                </RouterLink>
            </template>
        </ul>
    </div>
</nav>

その２

その３

そういえばJavaScript でCSS のmedia query を判定できるんだったw

mql = window.matchMedia(mediaQueryString)

※参考文献

その４

VSCode WebView では、VSCode のTheme 色を、CSS 変数として利用できるらしい👀

code {
  color: var(--vscode-editor-foreground);
}

※参考文献

その５

Vue.js 3.x で、グローバル変数を定義した後に、実際に利用する方法は、これが参考になった👀

<script setup>
    import { getCurrentInstance } from 'vue'

    const app = getCurrentInstance()
    const $store = app.appContext.config.globalProperties.$store

    console.log($store)
</script>

※参考文献

今回の成果

GitHub
Nintendo Switch でトレーニングを進めた
- 脳を鍛える大人のNintendo Switchトレーニング
勉強会に参加した
- 【新SkyWay ローンチイベント】SkyWay CONNECT
本を読み進めた

※関連Tweet

2023/02/18 ~ 2023/02/24 のもくもく日記

もくもく 前回までは

途中経過

その１

その２

その３

その４

その５

今回の成果

もくもく前回までは