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

Pocket

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

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

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

Layout分割はNuxtも同様に可能

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

<template>
  <div>
  <body>
    <Head />
    <hr >
    <div class="container">
          <nuxt />
          <Menu />
    </div>
    <hr>
    <div class="container">
    	<Foot />
    </div>
  </body>
</div>
</template>

<script>
import Menu from '@/components/Menu.vue';
import Head from '@/components/Head.vue';
import Foot from '@/components/Foot.vue';

export default {
  components:{
    Head,
    Menu,
    Foot,
  },
}
</script>

上記がdefault.vueである。

</nuxt>

となっている箇所がpagesファイルが読み込まれる場所になる。

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

変数を出力させたい場合

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

<template>
<div>
{{test}}
</div>
</template>
<script>
export default{
	async asyncData(context) {
    return {
			test:"あああああ"
		}
	},
}
</script>

コメントを残す