Nuxtを試す

今後TechLaBeyondでは業務支援システムを開発予定です。某友人からNuxtを勧められたので採用しようかなと思いとりあえず触ってみました。全部AIエージェントに丸投げしてもできると思いますが、自分が触ったことがない技術を使うのは少々気持ち悪いですからね。

とりあえずプロジェクトを作成

Qiitaの記事を読んで、とりあえずプロジェクトを作成してみました。

zsh % npx create-nuxt-app todoapp

作成が完了したら、以下のコマンドで実行します。

zsh % npm run dev

http://localhost:3000でリッスンしていると出るので、アクセスするとこんな画面が出ました。

Nuxtのデフォルト画面

とりあえずVue(ぶえではなくビュー).jsの入門を学んでapp.vueを以下のコードに書き換えてみました。

<script setup>
import { ref } from 'vue';

const value = ref("あいうえお");

function changeValue(){
  value.value = value.value == "あいうえお"? "かきくけこ": "あいうえお";
}
</script>

<template>
  <div>
    <h1>{{value}}</h1>
    <button @click="changeValue">変更する</button>
  </div>
</template>

押すとあいうえおからかきくけこに変わるWebアプリが作れました。

あいうえおかきくけこ

今日はとりあえずここまで！ぶえ！

あとがき

ぶえ

参考文献

https://qiita.com/Kentaro91011/items/406d8121775f98ddd84d https://ja.vuejs.org/tutorial/