Create a Blog with Nuxt Content The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.
Composition APIを使って感じた「これどうなの？」
はじめに Vue.js のバージョン 3 系から導入された新しいコンポーネント形式として、「Composition API」があります。 昨年業務の中で、Composition API を使ったコードを書いてきましたが、その中でいくつも「これどうなの？」となることがたくさんありました。 そんな「これどうなの？」を自分の中での整理を含めて書いていきたいと思います。 Composition API とは Composition API を知らない方にざっくりとだけ伝えると、従来の Options API で切り離すことのできなかったリアクティブ値とリアクティブ値に関連した処理を UI コンポーネント（View）から切り離すことのできる技術です。 簡単に例を書きます。 export default { data: () => ({ count: 0, }), methods: { increme
ongaeshi.me 自分のウェブサイトを VitePress でリニューアルした。 自分がやりたいことは VitePress のデフォルトテーマの機能だけで完全に賄うことができた。一通りそろっていている。起動が早いのもよい。 レポジトリはGitHubで管理されており、push すると自動で deploy されるようになっている。この辺りはほぼ VitePress 公式の設定でうまくいった。 github.com 一番の目的は Markdown で書けるようにしてウェブサイトの更新頻度を上げるためで 、これで Obsidian を使って原稿の執筆が可能になった。普段使っている Vault に https://ongaeshi.me/history.html の原稿をコピーして運用している。追記したいときは Obsidian で編集・確認後、そのままクリップボード経由で GitHub にコ
Vue3時代にviteでvue2をビルドする
もうSvelteでええやｎ ------------------- ↓ 前書きはここから ↓------------------- Svelteを使うようになってから、 すっかりご無沙汰のvue。 vue3の考え方にあまり賛同できず、 世間もReact一色になりつつある vue2が急に必要になったので、 じゃあ、ビルドを整理するかと思ったら、 気がついたらvueのバージョン3がstableになっていて、 世の中全部がvue3になっていた。 そこでvue3の時代にvue2をビルドする方法を残しておく。 ビルドツールはvite。 rollupとesbuildベースのの高速ビルドツールでvue公式がサポートしている。 ヾ(・ω<)ﾉ" 三三三● ⅱⅲ コロコロ♪ ------------------- ↓ 本題はここから ↓------------------- プロジェクト作成 この手のビルド
Vue.js is a JavaScript library that helps you build web applications using the MVVM (Model-View-ViewModel) architectural pattern. Evan You, an ex-Googler, developed the project. It is a strong open-source project with high usage popularity and GitHub stars and forks. Why Use VUE.js?As we know, there are many frameworks on the market, and choosing the proper framework for the project can be challen
Components | BootstrapVue
Designed and built with all the love in the world. Maintained by the core team with the help of our contributors. Currently v2.23.0. Code licensed MIT. Docs generated with Nuxt.js and proudly hosted on Vercel.
今回は、Laravel MixでSass・JavaScriptなどをコンパイルした際に、ソースマップを出力する設定方法となります。 また、今回の例ではLaravel Mix をすでにインストールしている前提としています。Laravel Mix のインストール方法などについては、以下のリンク先を参考にしてみてください。 【Laravel Mix】Sass・JavaScriptのソースマップを出力する設定方法Laravel Mixでは、設定をwebpack.mix.jsファイルで管理します。 以下、webpack.mix.jsに、ソースマップを出力する.sourceMaps()メソッドを追加した設定例となります。 const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resou
概要 自作のNuxt.jsはSSRモードでfirebaseにホスティングしようとネットで方法を探してました。 見つかった記事は2019の物でちょっと古くて（実際その通りやったら詰んでしまう）困ってました。 そこでこの記事とこの動画を参考になんとかデプロイできました。 でもどれも英語だったのでせっかくなので日本語の記事を書こうと思った次第です。 手順を見たくない方へ このボイラープレートをそのまま使う。 手順1 新規Nuxtアプリを作成する 注意 nuxt本体のソースコードを管理しやすいために/srcの中に入れてますが、そうしなくても良いです。ただ後述のfirebase.jsonのpredeployの設定をご自身のパスに合わせて修正してください。 手順2 まずfirebaseでアカウントを申請し、新規プロジェクトを作成してください。 nodeバージョンを10以上を使うため、プランはblaze
ReactからVueコンポーネントをブリッジして使う方法
始めに Vue.jsからReactに乗り換えよう！そんなふうに思ったときに、規模が小さいなら一気に全部差し替えることができるかもしれませんが、大きくなるとそれは難しくなると思います。段階的にやる方法の1つとして1ページずつReactに差し替えていくことが考えられますが、そこで使われているVueコンポーネントが他のページと共通で使われていて迂闊に差し替えることができない・・・なんてケースもあると思います。 最初の移行コストを下げるために、そもそもVueコンポーネントをブリッジさせて表面上だけReactで動かすみたいなことができないかなと色々検証していて、ある程度動くようになったので記事にまとめたいと思います。今回は移行の話なのでVue2を対象にしています。 検証イメージ 下のGifアニメのような、Reactアプリの中でVue.jsで作ったカウンターコンポーネントを呼び出してデータやイベントを
「Vueが2021年時点で最も優れたフレームワークだと感じる理由をVue/Reactエンジニアがまとめます！技術選定を悩んでいるなら必見です」低コストなモダナイズ開発の実践 | Ragate
Vueが2021年時点で最も優れたフレームワークだと感じる理由をVue/Reactエンジニアがまとめます！技術選定を悩んでいるなら必見です こんにちは！ 社内で新しいサービスを開発する際や、既存サービスのフロントエンドの改修などで JS フレームワークの選定について調査・検討する場面があるかと思います。 数年前までは Vue / React / Angular の3つが代表的になってましたが、最近では参考文献・コミュニティの活発さなどから考えて Vue / Reactの2強になりつつあります。 中でもわたしたちは VueJS が2021年時点で最も優れたフレームワークだと考えており、今回は Vue のどのような点が優れているか解説したいと思います！ はじめに 本記事では VueJS を選ぶメリットなどについてまとめており、 ReactJS や Svelte などの他のフレームワークの特徴に
Vuejs CLI環境下で一部をhtmlで実装したい時 Vuejs CLIでvue拡張子のファイル内で一部をhtmlファイルを読み込んで実装したい時がある方、 その方々に、試行錯誤を経て分かった方法を共有します。 参考 Vue.jsで外部HTMLファイルをinclude(っぽく)する 環境の整理 開発環境：Vuejs CLIでインストールしたばかりの環境 ##方法 Vuejs CLIをインストールする。 HelloWorld.vueが生成される、その中を以下のように変更。 <template> <div class="hello"> <p>Practice</p> <div v-html="htmlContent"></div> </div> </template> <script> export default { name: "HelloWorld", data() { return
Composition APIだけではない、Vue 3の新機能（2） コンポーネント内容を任意の場所に移動するTeleport Teleportは、コンポーネント内容の一部を、Webページ内の任意の場所に移動（テレポート）する機能です。モーダルダイアログやポップアップなど、コンポーネント外部に記述する必要があるHTML要素に、コンポーネント内容を反映する場合などに利用できます。図2のサンプルでは、コンポーネント内容の一部を、コンポーネント外（index.htmlに記述したHTML要素）にテレポートしています。 図2 Teleportのサンプル（p002-teleport） コンポーネントの<template>部をリスト3に示します。（1）の通り、移動させる内容を<teleport>タグで囲み、to属性にテレポート先のCSSセレクター（ここでは「teleport-target」ID）を指定し
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a Blog with Nuxt Content
ホームページを VitePress でリニューアルした - おんがえしの blog
Guide to Lifecycle of Vue in VUE.js
【Laravel Mix】ソースマップを出力する設定方法｜Sass・JavaScript
【Nuxt.js】Nuxt.js SSRモードでfirebaseにデプロイする手順 2020年版
Vuejs CLIにて一部を外部htmlファイルを読み込んで実装する方法 - Qiita
新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介
stern-bow.hatenablog.com
expochi.hatenablog.com
manga.manacomicmonster.com
erika2.dt.weblog.vc
ameblo.jp/19471218
innovatopia.jp