TIS ENGINEER NOTE

27才文系出身フリーランスエンジニアのブログ

プログラミング

Nuxt.jsで使える便利な設定・書き方をまとめていく

更新日:

存在感と注目度を高めているWebフレームワークであるNuxt.js。

今日はそんなNuxt.jsの開発をスムーズに行うための設定について、紹介していきます。

開発環境の構築は以下の記事で紹介していますので、Nuxt.jsに興味を持っているが、まだ触ったことのない方はこちらの記事を先にご覧になってください。

次世代のWebフレームワークであるNuxt.jsを使ってみる

開発における便利テクニック

ポートの変更

Nuxt.jsの開発環境は基本的にポート3000を使用します。この3000はRuby on Railsなどでも使われている人気のポジションなので、変えておきたいという人も少なくないでしょう。

開発環境におけるポートを変えたい場合は、package.jsonに設定を加えるだけで可能です。

いじったところはすでに記述してあるscript.devのnuxtの前にPORT=3333を加えた部分です。これだけでyarn(npm) run devを行った時にlocalhost:3000でアクセスできるようになります。

APIリクエストの準備

フロントエンド開発を行っているとほぼ実装することとなるAPIサーバーへのリクエスト処理。大体はaxiosなどのライブラリを使用する箇所で読み込んで使いますが、Nuxt.jsではaxiosのモジュールが用意されているので、そちらを利用することオススメします。こちらを利用することで各種設定や、ヘルパーの設定を柔軟かつシンプルに記載することが可能です。

モジュールのインストールとNuxtのコンフィグファイルに設定を追加するだけで可能です。nuxt.config.jsはスタートテンプレートを使った場合は最初から作成されていますが、フルスクラッチの場合でまだ存在しない場合はプロジェクトディレクトリのトップに作成してから編集して保存しましょう。

あとはリクエストするときは以下のように記述することで、効率よくAPI周りの処理を行えるようになります。他にもリクエスト/レスポンスにさいの共通して行いたい処理なども簡単に実装できますので特に強いこだわりがなければNuxtモジュールのaxiosを使用すると開発がスムーズになることでしょう。

GET
POST
共通処理など

公式ドキュメントでは詳しい設定や使用例を参照することができます。

スタイルシートにsassを使う

vueファイルの中でスタイルを記述する時にcssではなくsassを使いたいということも多いでしょう。そんな時もほとんど手間なく実装可能です。

上記コマンドを実行すれば、vueファイルにおいて、以下のような記載が可能となります。

fontawesomeを使う

Webフォントとして最も有名どころであり、使いやすさ・種類の豊富さに定評のあるfontawesomeですが、こちらもNuxtで簡単につかうことができます。Nuxtのモジュールにfontawesomeは用意されていますが、そちらが現在バージョン5に対応していないため、通常通りパッケージをインストールする形で導入します。

nuxt.config.jsに以下を記述します。

あとはソースコード内で以下のようにアイコンを配置することが可能です。

Normalize.cssを使う

スタイルシートの初期状態をいい感じに調整してくれるNormalize.cssもちょっとした手順で導入することが可能です。

あとはnuxt.config.jsに以下のように設定を加えることでNormalize.cssの導入が完了します。

まとめ

いかがだったでしょうか。開発を行う前に押さえておきたい設定、プラグインの導入をメインに紹介しました。

この記事で開発の土台はできたかとも思いますので、早速Nuxt.jsでのフロント開発を楽しんでいきましょう。

閲覧いただき、ありがとうございました。

よく読まれている記事

エンジニア入門

2018/8/19

本気でRubyを学びたい人のためのエンジニアスクール『ポテパンキャンプ』

こんにちは、フリーエンジニアのてぃすです。 エンジニアといえば今や最も少ない投資で高収入を望め、更には週3勤務やリモートワークなどの柔軟な働き方も目指せる夢のある職業です。 ここ最近は営業職や事務職から、将来性を考えてエンジニアに転身するといういう人もかなり増えてきています。 特にRubyプログラマーは日本における絶大な需要とリモート案件の豊富さから、特に人気のあるポジションとなっています。エンジニアとして働いているが、職場環境に不満を抱いていたり、今扱っている技術が今後通用するか不安に感じ、Ruby・W ...

続きを読む

エンジニア独立

2018/8/12

SIer・SESからWEB系エンジニアにキャリアチェンジする現実的な方法

エクセルで作らされる誰が読むかも分からないドキュメント 月に1回の帰社日 枯れた技術を言われた通りに扱うだけの毎日 スーツ勤務で下級労働者扱い SIer・SES系エンジニアとしての業務経験があり、かつ外の世界を知ったエンジニアから見たSIer・SES系のイメージってこんな感じですよね。 ここで言う外の世界の代表格と言えばWEB系ベンチャーやフリーランス。 カテゴライズの厳密さについては色々と意見はありますが、いわゆる自社サービスで利益を立てている企業と言えば分かりやすいでしょう。 最近ではエンジニアの待遇 ...

続きを読む

エンジニア入門

2018/7/29

エンジニアにとっての理想的な職場とは

こんにちは、フリーランスエンジニアのてぃすです。 この記事を読んでくださっているということはITエンジニアかと思いますが、皆さんエンジニアとして働くならどんな環境で働きたいですか? スーツ勤務が嫌、言われたことをモクモクとこなすのが好き、など人によって理想として掲げる働き方って大きく異なります。 僕はこれまでエンジニアとして、SES企業やノリノリのベンチャー企業、起業したてのスタートアップ企業における業務を経験してきました。 今回は僕の経験や周囲のエンジニアから聞いた話を交えて、エンジニアにとっての働き方 ...

続きを読む

エンジニア入門

2018/8/19

未経験からプログラミングを学ぶための方法を徹底比較

いまの時代、プログラマという仕事ほどインスタントに高収入を目指せる職業は存在しないと考えています。 未経験の言語での参加にも関わらず、最初から残業なしで手取り30万円を得られた経験を以って、そのことを強く実感しました。 で、最近はプログラマ・エンジニアのこういった稼げる側面に気づいて、プログラマになりたいと考える人多くなってきました。 が、実際にどのような手順を踏んでプログラミングを学習して、プログラマになればいいか分からない人も同様に多いようです。 勉強方法によっては遠回りになりかねない 働きながら勉強 ...

続きを読む

エンジニア独立

2018/1/2

プログラマーという働き方を見限る前に見ておくべき記事

プログラマーとかSEってちょっと前まで最先端の働き方って感じで世間でもてはやされていましたが、今ではブラック業界の代表格と言われるようになっていますよね。エリート社畜の巣窟とか。 実際SIer系の案件であったり、システム会社を名乗る悪徳派遣企業によって希望を持って入ってきた若者が食いつぶされてきたわけですから、当然の帰結ともいえます。 実際僕がこれまで正社員として働いてきた会社も、みなし残業という名の残業未払いであったり、都内にも関わらず勤続2年目で手取り17万円とかいう扱いを平気でやってきました。鬼畜の ...

続きを読む

-プログラミング
-,

Copyright© TIS ENGINEER NOTE , 2018 All Rights Reserved Powered by AFFINGER5.