デジタルマーケットプレイス（DMP）α版サイト 行政機関・事業者がDMPによる調達方式を活用しやすい環境を実現するために、必要な利用者体験の実証を目的としたサービスです。
デジタル庁
デジタルマーケットプレイス（DMP）α版サイト 行政機関・事業者がDMPによる調達方式を活用しやすい環境を実現するために、必要な利用者体験の実証を目的としたサービスです。
Nuxt.jsで子コンポーネントや孫コンポーネントのスタイルを定義する
Nuxt.jsでscopedでcssを描く際に、子コンポーネントや孫コンポーネントにスタイル定義するのに必要なdeepセレクタをご紹介 はじめに だいたいの人が特別な理由がなければコンポーネント内のスタイル定義ってscopedで書いていると思います。今まではcssはグローバルにどんどん書いちゃえって思考だったので、このscopedを初めて見たときは目から鱗でした。でもいざ書き始めると意外と些細なところで引っかかったりするんですよね。今回は親から子、もしくは親から孫へのスタイル定義の話。 やりたいこと <template> <Parent class=“Parent”> <Child class=“Child” /> </Parent> </template> <style lang="scss" scoped> .Parent { .Child { // スタイル定義 } } </styl
【Nuxt.js】slot基礎編：コンポーネントの一部を置き換えよう - Qiita
前置き Nuxt.jsと言えばコンポーネント。 componentの内容を、ページによって少しで良いから変えたい… そんな時、slotに随分と助けられたので記録に残しました。 Vue.jsでも同様の使い方が可能です。 ※サンプルテキストはHello Nuxt.js!ではなくHello Vue.js!になっていますが、ご了承ください。 間違い等がございましたら、優しくご指摘いただけると嬉しいです！ 基礎編：超簡単な解説から実践編まで 応用編：全体のまとめ、propsとの違い を書いていきます。 slotって？メリットは？ ウェブサイトを作ってて、 「同じコードをコピペしまくってめんどいなぁ〜 あ！コンポーネント使えばいいじゃん！！ あれ？でもページによって○○だけ変えたいんだよなぁ」 って時、ありますよね？ コンポーネントを使いまわしたいけど、 ここの文字だけ変えたい！って時に使います。 （
Nuxt.js｜画像の参照方法のいろいろ｜たのしいWeb
Nuxt.jsで画像を表示したいのですが、うまくいかずに困っています。助けてください！<img src=”/assets/images/sample.png”>という書き方だとうまくいきません(･´ω`･)
【Nuxt.js】Vue Router基礎編：params, queryを使ってページ遷移 | aLiz Nuxt
前置き とっても便利なparams, queryについてご紹介🌟 同じコンポーネントを見せたいけど、 カテゴリごとにURLだけを変えたい… 一覧ページからソートして表示させたい… そんな時に便利です♪ params, queryについて いくつかに分けて書きます✍️ router-linkが分かれば簡単です🌟 まだ不安な方のためにも 複数の書き方で記載しました🍒
Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す
前回の記事 では画面遷移の仕方を紹介しました。 画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。 画面間でデータを渡す画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。 クエリパラメータを使うURLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。 以下のように pageName=next というデータを nuxt-link から渡します。
Nuxt.jsにおけるaxiosライブラリ、asyncData Hookの使い方 | アールエフェクト
Nuxt.jsでもVue.jsで同様にaxiosを利用することで外部からデータを取得することができます。外部からのデータ取得はアプリケーションを構築する上で表示に重要な部分なので本文書ではNuxt.jsにおけるaxiosの使い方とasyncDataの使い方について説明を行っています。 Nuxt.jsではサーバサイドでデータを取得する際はasyncData Hookまたはfetch Hookの中にデータを取得する処理を記述します。クライアントサイドでデータを取得する際にはmounted Hookの中にデータを取得する処理を記述します。 fetch HookはJavaScriptのfetch関数とは異なります。また本文書ではfetch Hookについての説明は行っておりません。
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
【Nuxt.js】asyncDataの引数はContextというオブジェクトです - Qiita
asyncDataの引数について Nuxt.jsでよく使われる「asyncData()」メソッドの引数には、 Contextというオブジェクトが渡されてきます。 例 export default { async asyncData ({ params }) { // ここでContextが引数に渡されてくる let { data } = await axios.get(`https://api-test/posts/${params.id}`) return { name: data.name } } } 参照：公式ドキュメント/非同期なデータ Contextとは Contextには、paramsやstore、route等の asyncData内で使用できるオブジェクトが入っています。 Contextの詳細については、公式ドキュメント/Contextに詳しく載っています。 asyncDat
Nuxt.jsのディレクトリ構造メモ - Qiita
# ASSETS This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. More information about the usage of this directory in the documentation: https://nuxtjs.org/guide/assets#webpacked **This directory is not required, you can delete it if you don't want to use it.** assetはLESS, SASS, Javascriptのようなコンパイルされていないアセットを入れるディレクトリ 詳細は→https://ja.nuxtjs.org/guide/assets webpackで取り扱うも
Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita
概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か？ ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita
概要 これからNuxt.jsで開発を始める方向けに、最初に抑えておきたいポイントを個人的にまとめます。私自身としてはAngularアプリの初期構築業務の経験があるのですが（数万行単位で書いてました）、自分が新チームの技術選定をするタイミングでNuxt.jsを選定しました。ある程度SPA開発の知識はありましたが、最初は各フレームワーク毎に結構抑えどころというか癖見たいのを感じました。そんな、親切で日本語な公式読んでもすぐには手の動かない並エンジニアの自分の様な方向けにまとまったチートシート的な感じになればいいなと思っています。 // 2020/11/26追記 記述内容を現状に合わせて見直しました。 本記事は全体像の把握を目的としており、記述内容の強化が簡便性を損なわない様、最初は読み飛ばしても問題ないと思われるトピックには ⚫️ アイコンをつけております。 Nuxt.jsとは Vueベースの
![[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f522a3ea0ba23b18b3ad160f6aed4b35129845f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTnV4dC5qcyVFNSU4NSVBNSVFOSU5NiU4MCU1RCUyMCVFNSU4NSVBOCVFNCVCRCU5MyVFNSU4MyU4RiVFMyU4MiU5MiVFMyU4MSU5NiVFMyU4MSVBMyVFMyU4MSU4RiVFMyU4MiU4QSVFNiU4RSVCNCVFMyU4MiU4MCVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFMyU4MyU5RCVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzJkOWM2OGZlMmFkMGUwZDdlMWZkMGUxYzhkYTIwYTQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoZWRyYWxsJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zM2Y4NGRiMGU3MTE4NDM2ZGQxMjAzYWNiMzE4YjYwMA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D06cc8cacedc55bd2a4cb98196e7be23c)
nuxt.jsにvue-carouselを導入してスライダーを作成 - Qiita
<template> <carousel :per-page="1" :autoplay="true" :loop="true" :pagination-padding="5" :autoplay-timeout="4000" > <slide> <img src="@/assets/images/slide1.jpg" /> </slide> <slide> <img src="@/assets/images/slide2.jpg" /> </slide> </carousel> </template> <script> import Carousel from 'vue-carousel/src/Carousel.vue' import Slide from 'vue-carousel/src/Slide.vue' export default { components: { Caro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
インストール
【Nuxt】nuxt-linkで遷移するときに画面の一番上にスクロールする
Nuxtjsの <a> と <NuxtLink> の使い分けについて。 - Qiita
Nuxt.jsで外部scssを読み込む - Qiita