インストールするだけであとは普通にreadme通りに使えた npm i vue-moveable github.com

公式のFAQに書いてある通り グローバルな設定と個別な設定方法が書いてあるが今回はグローバルな設定方法を試す ja.nuxtjs.org 試しにgoogleフォントのLemonadaを導入する fonts.google.com nuxtl.config.tsのheadのリンクに追記 export default { mode: 'sp…

結論 使えなかった vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: sitcky 以下、試した手順 スクロール時に特定の部分を固定するためのライブラリ vue-sticky-directive をNuxtプロジェクトに導入してみる github.com インストール…

以下の記事に他にも色々書き方書いてあった shigekitakeguchi.github.io asyncDataでデータを取得してローカルステートに入れるのはこんな感じ asyncDataで取得したのを入れる変数を定義しとかないとtypescript的にエラーが出るので定義をする @Component({ …

仮想スクロールライブラリであるvue-virtual-scrollerを使ってみる チャットとか大量のリストを表示するときに表示されているところだけdomを作ってくれる系のライブラリ github.com インストール npm install --save vue-virtual-scroller typescript用に型…

vue-web-camgithub.com インストール npm install vue-web-cam --save nuxt.config.jsを編集してmodulesに追記 //省略 modules: ['vue-web-cam/nuxt'] //省略 基本的な使い方は以下の様にtemplate内に埋め込み利用する

assets配下に再生したいファイルを配置 オーディオファイルをロードするように Webpack の設定を拡張する 以下を参考にnuxt.config.tsを修正 ja.nuxtjs.org // 省略 build: { extend(config: any, _: any) { config.module.rules.push({ test: /\.(ogg|mp3|w…

vue-clipboard2を利用する github.com プロジェクトに追加 npm install --save vue-clipboard2 plugins/vueClipboard.tsを作成 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) nuxt.config.tsに作成したpluginを追…

@bugsnag/js と @bugsnag/plugin-vue をインストール npm install --save @bugsnag/js @bugsnag/plugin-vue plugins/bugsnag.tsを作成 import Vue from 'vue' import bugsnag from '@bugsnag/js' import bugsnagVue from '@bugsnag/plugin-vue' const bugsna…

github actions用にプロジェクトのディレクトリ内の .githiub/workflows/nodejs.yml に以下ようなymlファイルを作成する name: Build and Deploy on: push: branches: - master jobs: build: name: Build runs-on: ubuntu-latest steps: - name: Checkout Re…

Amplifyとは Googleのfirebaseと似たようなもののAWS版という軽い認識で触ってみる aws.amazon.com 用意されてる機能としては - データストア - 認証 - 分析 - API - AR/VR - インタラクション - 通知 - 予測 - PubSub - ストレージ Alexaアプリとかも作れる…

ja.nuxtjs.org npx create-nuxt-app sampleapp create-nuxt-app v2.10.1 ✨ Generating Nuxt.js project in sampleapp ? Project name sampleapp ? Project description My first-rate Nuxt.js project ? Author name remoter ? Choose the package manager N…

Nuxtプロジェクトを作成するとデフォルトでNuxtのアイコンが設定されているのでそのfavicon.icoを差し替えればよい 差し替えるファイルの場所は (プロジェクトルート)/static/favicon.ico ファイル名を変えたい場合は、nuxt.config.tsの head の linkの中を…

Nuxt.jsでnuxt-linkとかを利用して画面遷移する場合、デフォルト設定ではスクロール位置を保持したまま画面を切り替えてくれる これをやめて画面遷移するたびにスクロール位置を一番上になるようにする ja.nuxtjs.org 手順は公式に書いてある通り まずプロジ…

すごく丁寧にまとめてくれてる人がいた lab.astamuse.co.jp Vue.jsだけのライフサイクルは公式より jp.vuejs.org asyncData や fetch と beforeCreate や created でどれを使うべきかみないな悩むことがあるので 用途によって使い分ける必要があるかなぁと思…