2018-11-03にVueFesJapan2018にてお話しました
![noteをNuxt.jsで再構築した話](https://cdn-ak-scissors.b.st-hatena.com/image/square/c933dc737a554e925af81134b3894bf5492dd8a1/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F41b20d5bd3d44bd78352f7d07a8e231e%2Fslide_0.jpg%3F11128851)
Vueでキャンペーンサイトを作った話を自社の記事で投稿してしまい、同じネタを使おうとしたら、二重投稿禁止というのを知らなくて、焦りました。 似たような投稿するのもあれなので、なんか違う話題も書きます。 nuxt.js+expressのvue-cliテンプレートを使って、api+SSRのシングルページアプリケーション構成のマイクロサービスを作っています。 ちっちゃいページ+ちっちゃいAPIを使うとすごくいい感じにマイクロサービスを作ることができました。その良さを今回は語ります。 重要なものが最初から簡単に用意できる webpackの設定は自分でローダーを設定すると柔軟に設定する代わりに割と手間が増えます。 特にVueでお決まりのアプリケーションを作りたいときに、下の要件は欲しいでしょう。 シングルファイルフォーマットでの開発(vue-loaderの設定) linterの実行 シングルページで
この記事は Nuxt.js 入門 #1 を実践しながら、詰まったところを記録しておくものです。 なぜこの記事を選んだか Nuxt.jsを触りたいが、初めから順番に作っていくような、RoRチュートリアルのような記事が見つからなかったからです。 できればフルスクラッチがよかったのですが、他に見つからないので。(vue-cliからテンプレートを使用します。) あと、コードがハイライトされていないことがかなりの苦痛で、できれば避けたかったのですが… 第一候補の The Nuxt.js Tutorial to Build a Multilanguage Website - Storyblok がstoryblok.comの登録が必要だったので、第二候補のこちらへ。 筆者知識 JSそこそこ使う 2017年前半ごろにVueとVuexをてきとーに使いTODO(未満)アプリ作成(ほぼ忘却) Nuxt.js未
はじめに https://qiita.com/seapolis/items/ac950e099db2775ba6a2 前回、こちらの記事でexpressとVue.jsを用いたシンプルなテンプレートをご紹介したのですが、結局その後Vue.jsを用いたフレームワークであるNuxt.jsに触れ、その便利さに感動してしまい、自分が作ったフレームワークなどすっかり忘れてNuxt.jsをずっといじくっておりました。 で、自作プロダクトに適用する折となり、初めにnuxt-community/express-templateを使っていたのですが、最近になってこのテンプレートが更新され、最新のNuxtが使われるようになったとともに、構成が大幅に変更されてしまい、Nuxt.jsがexpressをserverMiddlewareとして抱き込むような形となりました。 この構成、ファイル数が少なくて見通しもよく確か
Nuxt.jsからPuppeteerが実行できない TypeError: Cannot read property 'on' of undefinedJavaScriptNode.jspuppeteerNuxt 現象 単体のCLIから起動すると成功するコードを、NuxtのserverMiddlewareとしてリクエスト経由で起動するとpage.gotoが動かない。 実行環境 Windows7 Node.js 11.0.0 (に上げたが変わらず) Puppeteer 1.9.0 (および@nextも同様) Nuxt.js 2.2.0 エラー出力 TypeError: Cannot read property 'on' of undefined at Function.addEventListener (~\node_modules\puppeteer\lib\helper.js:165:13
最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
module.exports = { build: { extend: ({ module, output }) => { // rulesの先頭に追加 module.rules.unshift({ test: /\.worker\.js$/, loader: 'worker-loader' }) // HMR時にWebWorkerでwindow is not definedになる問題対策 output.globalObject = 'this' } } } worker-loaderの設定をArray.push()でmodule.rulesの最後に追加すると、うまく動きませんでした。なのでArray.unshift()で配列の先頭に追加しました。 vue-loaderとかbabel-loaderが先に処理してしまうからでしょうか。 また、webpackのHMRが有効になっていると(Nux
はじめに これはVue.js #2 Advent Calendar 2017の16日目の記事です ぼくの前日は ykhirao - Qiitaさん、Vue.jsでv-forをネストする - Qiitaでした 本記事はぼくがWebの初心者なだけなので、そこまで初心者向けではないかもしれません 追記:2018/11/30 2017/12/27に@altさん、 2017/12/18, 2018/09/05に@khskさん 2018/10/22に@tryforthさん、 2018/11/29に@masalennonさんから修正を頂きました ありがとうございます!😊 ぼくのバックエンド ぼくがどれくらいWeb初心者かをざっくりと説明すると今までの仕事の9割はiOSで1割はAndroidです。そのうちNativeアプリ率は100%で、JSを使用した回数は0回です そんな中お客さんのWebサイトのリニ
Storybookのバージョンについて追記 2018年10月29日にStorybook4系がリリースされたみたいです。 Webpack4に対応してるので、Nuxt2系使っててStorybook追加したい人はそちらを使うことをおすすめします(いつかそっちも書きたい)。 この記事ではStorybook3系で書いてます。 Storybookとは? コンポーネントのカタログ UIコンポーネントを単独で開発でき、コンポーネントの再利用、テストの容易性、開発スピードを向上させることができる なぜ必要? プロダクトとは切り離して開発する →依存関係が全くない状態を保てるため、再利用性が高いコンポーネントを作ることにつながる エンジニアとデザイナーの認識のズレをなくすため →ここデザインと違うよねーとか 使い方 ※ 2018年10月3日時点で、Nuxt v2にはStorybook v4のアルファ版しか対応
概要 Nuxt2.0でstorybook使おうと思ってたら、結構つまづいてしまったのでメモ。 修正の内容 Nuxt2系で、storybook3系使おうとしたら、Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.とかなって、VueLoaderPluginとかいろいろしてみたけど、挫折した。 そこで、webpack4系 + storybook4系を入れてる記事があったので、それを見て4系を入れた。 2018/10/23 修正 tic40さんありがとうございます! 結果動いたが、storybookでassetsを呼ぶ時に、「Can't resolve 'assets/**'」 とエラーが起きるようになった。 そのため、両方のconfig.jsのali
module.exports = (baseConfig, env, defaultConfig) => { //nuxt.jsの'@'や'~'の読み込み defaultConfig.resolve.alias['@'] = rootPath; defaultConfig.resolve.alias['~'] = rootPath; // addon-storysourceの設定はここから defaultConfig.module.rules.push({ test: /\.stories\.jsx?$/, loaders: [require.resolve('@storybook/addon-storysource/loader')], enforce: 'pre', }) return defaultConfig; }
現在日本語の記事ではNuxtJS上でvue-i18nを使って国際化を行う方法のみ説明されています。 しかしそれらは1年以上前のものだったりして少々古く、2018年10月現在ではnuxt-i18nというnuxt用にvue-i18nを拡張したプラグインが開発されています。 なので今回はこのnuxt-i18nを使って国際化を行ってみたいと思います。 前準備: Nuxtプロジェクトの作成 以下設定でNuxtプロジェクトを作成します(Project Name以外デフォルト) $ create-nuxt-app > Generating Nuxt.js project in /Users/wildmouse/develop/practice ? Project name nuxt-with-i18n ? Project description My mind-blowing Nuxt.js proje
# nuxt-i18n nuxt-i18n provides i18n features for your Nuxt project: vue-i18n integration Automatic routes generation prefixed with locale code SEO Translations messages lazy-loading Redirection based on browser language Different domain names for each language Vuex store module with current locale & messages
福岡から世界中の"むずかしい"を簡単にする株式会社diffeasyCTOの西@_takeshi_24です。 公開から1年以上が経ち、この記事の内容も少し古くなってきました。 Nuxt.jsやFirebaseを使って、サーバーレスでWebアプリケーションを開発する手順について、アドベントカレンダー「diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019」の中で、「Nuxt.jsとFirebaseとCloudFunctionsでWebアプリ開発」シリーズとして、連載していきます。 Nuxt.jsとFirebaseなどを使ってWebアプリケーション開発にチャレンジしたい方、是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね!お願いします! 言葉の説明 まずはNuxt、Firebase、PWAの説明です。 ご存知の方はすっ
Nuxt.jsプロジェクトの作成 h-sakano.hatenablog.com Firebaseプロジェクトの作成 https://console.firebase.google.comでFirebaseプロジェクトを作成することができます。 また、Authenticationの「ログイン方法」タブでメール/パスワードによる認証とGoogleログインを有効にしておきます。 Firebase SDKの準備 プロジェクトにfirebaseパッケージを追加します。 $ yarn add firebase 次に、先程作成したプロジェクトページから接続情報を取得します。 プロジェクトページ上段の画像のボタンをクリックすると認証情報が表示できます。 これを使用して初期化処理を書きます。 // ~/plugins/firebase.ts import firebase from "firebase"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く