普段はJinja2つかうことが多いが、Nuxt.jsを使ってみた

もともとPyhtonのjinja2でレンダリング処理をすることが多く、
たまに非同期の処理を行うときにはjQueryを使っていたが。でも基本は同期処理でHTMLのコンテンツをとっている。

最近SPAサイトも多くなってきたし、jinja2をやめてあくまでPythonはAPIをかえすだけの処理にし、
フロントエンドはすべてのJavascriptできるようにNuxtを使うことにした。

以下はこれまでJinja2を使ってた人にとってNuxtの何がいいかをまとめる。

Layout分割はNuxtも同様に可能

Nuxtの場合は、Layoutsディレクトリ配下にdefault.vueを記載する。そこからComponentsディレクトリ配下にヘッダーやフッターの共通部分を読み込み、Pagesディレクトリ配下に各コンテンツ部分を記載する。以下はその例である。

[javascript]

[/javascript]

上記がdefault.vueである。
[javascript][/javascript]
となっている箇所がpagesファイルが読み込まれる場所になる。

あとは、文字通りHead, Menu,Footとなっているのは、それぞれのコンポーネントを読み込む場所である。

変数を出力させたい場合

Jinja2だと{{}}として変数の値をHTMLに出力できるが、Nuxtも同様で、{{}}として変数を出力可能である。
以下は静的な値を出力してるけど実際は、axiosなど使ってデータを取得したものを表示することになる。

[javascript]

[/javascript]