Vuetify+Flaskセットアップ

今回はVuetifyを試す際にセットアップの機会があったので備忘として記事を書き記します。
nodeは事前にインストールしているものとします。

node -v
v20.11.1

Vuetifyプロジェクト作成

参考先は以下公式ドキュメントです。

Get started with Vuetify 3 — Vuetify

npmコマンドを実行するとTypeScriptを使うか、インストールの際はyarnやnpmのどれを使うかなど選択することになります。今回はTypeScriptをNo、インストールはnpmで行い、そのままinstallを進めるかどうかでYesを選択しました。

npm create vuetify@latest
Need to install the following packages:
create-vuetify@2.2.3
Ok to proceed? (y) y

Vuetify.js - Material Component Framework for Vue

√ Use TypeScript? ... No / Yes
√ Would you like to install dependencies with yarn, npm, pnpm, or bun? » npm
√ Install Dependencies? ... No / Yes

上記コマンド実行後、vuetifyのプロジェクトが作成されます。今回はこのプロジェクトをFlask経由で起動させるためvite.config.mjsを少し書き換えます。defineConfig内にbaseを追加しました。これを設定しないと後々jsやcssの参照時にエラーとなります。

# 一部抜粋
export default defineConfig({
  base:"./",
  plugins: [
    Vue({
      template: { transformAssetUrls }
    }),

最後にbuildを行います。vue単体で動かす場合はnpm run devコマンド等でよいのですが、今回はFlaskから動かすのでbuildしておく必要があります。

npm run build

> frontend@0.0.0 build
> vite build

vite v5.2.11 building for production...
✓ 137 modules transformed.
dist/index.html                                             1.20 kB │ gzip:  0.53 kB
dist/assets/materialdesignicons-webfont-CYDMK1kx.woff2    385.36 kB
dist/assets/materialdesignicons-webfont-CgCzGbLl.woff     561.78 kB
dist/assets/materialdesignicons-webfont-D3kAzl71.ttf    1,243.50 kB
dist/assets/materialdesignicons-webfont-DttUABo4.eot    1,243.72 kB
dist/assets/index-DpBm7gqe.css                            576.56 kB │ gzip: 83.09 kB
dist/assets/index-CIexKzZ1.js                             173.36 kB │ gzip: 62.02 kB
✓ built in 1.47s

Flaskプロジェクト作成

今回は特に難しいことをせずVuetifyを呼び出すだけのプロジェクトを作りますので、venvで仮想環境を作ったのちにFlaskを取得します。

mkdir backend
cd .\backend\
python -m venv venv
.\venv\Scripts\activate
pip install Flask

backendディレクトリ直下にapp.pyを作成し、以下のように記述を行いました。内容としてはVuetify側のindex.htmlを呼び出しているだけです。

from flask import Flask, render_template, send_from_directory

app = Flask(__name__, static_folder='../frontend/dist', template_folder='../frontend/dist')

@app.route('/')
def index():
    return render_template('index.html')

@app.route("/<path:path>")
def sendModuleFile(path):
    return send_from_directory(app.static_folder, path)

if __name__ == '__main__':
    app.run()

上記の状態でbackendディレクトリからFlaskプロジェクトを起動し、Vuetifyのトップ画面が表示されたら無事完了です。

flask run