もともと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>
