How to setup one page as VueJS App on Phoenix 1.6 Esbuild?

Phoenix Forum Questions / Help
,
1

I’m currently building a publishing platform with Elixir Phoenix and it’s been an absolute joy to work with. I’m currently working on implementing an editor in VueJS for editing the draft of the book.

The app is a vanilla Phoenix app with multiple pages, I only want the /draft/:draft_id/edit route to be served by a single VueJS app. How do I setup my Phoenix app to have that single route to be a VueJS app ?

I currently have an draft-editor.js file that contains

import Vue from "vue/dist/vue.common.prod";

const app = new Vue({
  el: "#draft-editor",
  components: {
    EditorContent,
  },
});

This is imported on my draft/edit page as <script phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/js/draft-editor.js")}></script>

But this has some problems. I have to manually import vue.common.dev when developing to show errors on development and change to vue.common.prod when deploying. How do I make the esbuild asset pipeline handle this ? Thanks.

1 Like