Vue.js
過去記事では制作過程の記事の中に紛れ込ませていましたが、検索しづらいので Vue.js Tips としてまとめていきたいと思います。 Vuex で Action にパラメータを複数を渡す パラメータを1つ渡すときは .vue this.$store.dispatch('items/getItems', this.data…
日本製のHeadless CMS、microCMSをさわってみる。その9 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ ラーメンコンテンツの描画 前回作ったコンテンツを描画していきます。 curlは python -mjson.tool …
日本製のHeadless CMS、microCMSをさわってみる。その8 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ サブドメインあてる 前回 と同じ用に設定。 サブドメインつきで https://ramen.yuheijotaki.dev/ …
日本製のHeadless CMS、microCMSをさわってみる。その7 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ webhook設定 microCMSを更新したら自動ビルドが走るようにするのでwebhookの設定を行う。 参考: …
日本製のHeadless CMS、microCMSをさわってみる。その6 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ generate設定 Gitにプッシュした際に、APIから記事一覧情報取得して詳細ページを生成する必要があ…
日本製のHeadless CMS、microCMSをさわってみる。その5 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ API連携(詳細ページ) 詳細ページを作成する。 Nuxtでは pages/_id.vue とすると pages/[ContentI…
日本製のHeadless CMS、microCMSをさわってみる。その4 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ API連携(一覧ページ) .env設定 まず.envにAPIキーなど環境設定を行います。 下記の記事通りでい…
日本製のHeadless CMS、microCMSをさわってみる。その3 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ モジュールのインストール sass-loader node-sass (.scss) @nuxtjs/style-resources (共通読み…
日本製のHeadless CMS、microCMSをさわってみる。その2 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ Nuxtのインストール GitHubでリポジトリ作ってNuxtプロジェクトを作成 $ npx create-nuxt-app [Pro…
日本製のHeadless CMS、microCMSをさわってみる。その1 GitHub: https://github.com/yuheijotaki/micro-cms-ramen Netlify: https://ramen.yuheijotaki.dev/ やること microCMSでコンテンツ入稿、API作成 Nuxtでフロント構築 Netliftyでホスティング microCM…
WordPressサイト(https://works-wp.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その13 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works.yuheijotaki.dev/ 高速化/最適化 Chorme の Audits …
WordPressサイト(https://works-wp.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その12 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works.yuheijotaki.dev/ ドメイン紐付け コンテンツ登録や調…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その11 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ Google Analyticsの追加 Google…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その10 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ meta 設定 トップと詳細で出力…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その9 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ Pugで v-if Pugで v-if を使う <template lang="pug"> </template>…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その8 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ dataで取得したカラーコードをcs…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その7 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ 外部リソースの(インストールし…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その6 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ 前回から1ヶ月ほど空いてしまい…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その5 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ Pug と Nuxt.js(Vue.js) はじめ…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その4 GitHub: https://github.com/yuheijotaki/works-nuxt Netlify: https://works-yuheijotaki.netlify.com/ Netlify にデプロイ Netlifyのサ…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その3 GitHub: https://github.com/yuheijotaki/works-nuxt 作業フォルダを src/階層にまとめる nuxt.config.js に export default { ... srcDi…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その2 GitHub: https://github.com/yuheijotaki/works-nuxt クリックイベントと $emit / props コンポーネント名を Filter.vue にしようと思っ…
WordPressサイト(http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その1 GitHub: https://github.com/yuheijotaki/works-nuxt サイト構成 下記のシンプルな構成で行う トップページ (/) Works一覧(クリックで詳…
Vue.js or Nuxt.js を使ったサイト、日本のまとめあまりないのでまとめておきます。 デザインギャラリーサイト経由で見つけた多いのでWebアプリではなくサイトが多め。 採用サイトで結構使われているのは技術採用しやすいからかなと思いました。 Webアプリも…
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その7 最後は細かいテクニック的なところについて ローディング API から投稿データ取得するまでローディング、取得後に解除する DOM更新後にローディング解除したいので $nextTick…
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その6 今回はPhotoSwipeのvueモジュールについて v-photoswipe バニラJSのフォトギャラリープラグイン PhotoSwipe スワイプなど、スマホの各アクションにも対応しているのでlightbo…
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その5 今回はモジュールについて Isotope レンガ式のレイアウトをするためにnpmモジュールがいろいろあります。 vue-masonry を最初使ってましたが、実行タイミングが早かったり、v…
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その4 今回は記事ページでの情報取得について 詳細ページで記事情報のAPIにアクセス テンプレートファイル側(.php)で投稿IDを取得して変数 POST_ID に格納しておく SAMPLE-POSTTY…
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その3 今回はACFオプションページのリピーターフィールドについて ACF オプションページ リピーターフィールドの取得・出力 カスタムフィールドは、 sample_field(繰り返しフィー…
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その2 基本構造 WordPress の各テンプレートファイルからVue.jsを呼び込む トップページの場合、 homeGallery.vue には Vue ( <template> と <script> ) を書いていく感じ。 ▼ app.js import Vue from</template>…