Phoenix/Vue.js项目app.js自动更新问题及Vue项目结构咨询

Hey there! I’ve built a few apps with Phoenix and Vue.js, so let me walk you through these two questions clearly.

Why does priv/static/js/app.js auto-update when modifying files in asset/src? #

This is actually part of Phoenix’s default frontend build pipeline—no magic here!

Phoenix (especially versions 1.7+) uses esbuild as the default bundler out of the box. When you run mix phx.server in development mode, Phoenix spins up esbuild in watch mode. This mode monitors all files in your asset/src directory (and subdirectories) for changes. As soon as you save a file, esbuild automatically re-compiles your source code and outputs the bundled app.js (and corresponding CSS if you’re using it) to priv/static/js/.

You can trace this configuration to your project’s mix.exs file, where the assets.deploy and assets.watch aliases are set up to trigger esbuild commands. The watch command specifically includes the --watch flag that enables this auto-rebuild behavior.

Recommended Project Structure for Vue.js in Phoenix #

The ideal structure depends a bit on whether you’re building a Single-Page Application (SPA) or a Multi-Page Application (MPA) with Vue components sprinkled in. Here’s what works well for both cases:

For SPAs (Full Vue Frontend) #

Perfect if your entire app runs as a Vue SPA, with Phoenix acting as an API backend:

asset/src/
├── js/
│   ├── app.js          # Main entry point (mounts Vue instance)
│   ├── router/
│   │   └── index.js    # Vue Router configuration
│   ├── stores/         # Pinia/Vuex state management
│   │   ├── index.js
│   │   └── modules/
│   │       ├── user.js
│   │       └── cart.js
│   ├── views/          # Page-level components
│   │   ├── Home.vue
│   │   ├── About.vue
│   │   └── Dashboard/
│   │       ├── index.vue
│   │       └── Settings.vue
│   └── components/     # Reusable UI components
│       ├── Button.vue
│       ├── Card.vue
│       └── Layout/
│           ├── Header.vue
│           └── Sidebar.vue
├── css/
│   ├── app.css         # Global styles
│   └── variables.css   # CSS variables/theming
└── public/             # Static assets (images, fonts, etc.)

In this setup, your Phoenix template (usually lib/your_app_web/templates/page/index.html.heex) only needs a single mount point: <div id="app"></div>, and your app.js handles mounting the Vue app there.

For MPAs (Vue Components in Phoenix Pages) #

Great if you’re using Vue for specific parts of a server-rendered Phoenix app:

asset/src/
├── js/
│   ├── app.js          # Global utilities, shared Vue config
│   └── pages/
│       ├── home.js     # Entry for homepage (mounts Vue components on home page)
│       └── product.js  # Entry for product page (mounts Vue components there)
├── components/         # Shared components across pages
│   ├── ProductCard.vue
│   └── CommentForm.vue
└── css/
    ├── app.css
    └── pages/
        ├── home.css
        └── product.css

Here, each Phoenix page template has its own mount points, and the corresponding pages/*.js file initializes Vue components for that specific page.

Quick Tips #

• If you want full Vue 3 support (like <script setup> syntax), tweak your esbuild config to use the esbuild-vue plugin, or switch to Vite as your bundler (Phoenix has official docs for this setup).
• Keep shared components in the components/ folder for easy reuse across views/pages.
• Opt for Pinia (Vue’s official state management library) over Vuex—it’s simpler and more maintainable for most projects.

内容的提问来源于stack exchange，提问作者Bitwise