I am now just exploring Vue.JS integration with Coldbox. Successfully scaffolded my Coldbox app with Elixir and Vue.JS rendering nicely within my Chrome browser where I have installed Vue.JS development tools that confirm that the page is properly loading VueJS. With some basic knowledge of Vue.JS I started to modify Hola.vue, the only component that comes with the scaffolding. I simply changed the export default data in the Hola.vue from ‘Mr Coldbox’ to another value ‘Philippe’ , as follows:
Hola, {{ name }}!
h1 {
color: green;
}
No matter what, the default value ‘Mr Coldbox’ always comes back to the browser and ignores the updated component. May I know from where the Coldbox framework picks up this value? I’ve gone through all the files and I cannot find any trace of this default value, which I assume, would only come from the Hola.vue component. Thanks in advance for a clue, as I am stuck from the very beginning of using Vue.JS with Coldbox here.
I suspect, webpack did not compile the component. In a native Vue.js directory scaffolding, the “npm run dev” command starts the webpack development server and compiles any change automatically. But in my Coldbox environment it does not seem to be the case since only the server runs, not the webpack client, hence no compilation. If I try to do “npm install” within my Coldbox project directory it causes a conflict with the libraries (node_modules) already installed for Elixir and Vue.js and messes up the package.json file at the same time. How do we go around this problem? Should I build the UI separately first and only move the distribution files to the Resource directory in the Coldbox project?
I am afraid to understand what is going on…
1 - Installed Vue CLI in my Coldbox project: “vue init webpack myProject”
2 - Ran “npm install” to install the required node_modules
3 - Updated the .gitignore file
4 - Ran “npm run dev”
Now the vue components compile as expected PROVIDED they are found in the /src/components directory, NOT in /resources/js/components as scaffolded by Coldbox Elixir + Vue2js
Bottom line: the convention required by Coldbox to run VueJS conflicts with the default scaffolding installed by Vue CLI. Renaming the directories and shuffling the vue components around simply does not resolve the issue. Any ideas are welcome because I would really love to leverage all the work done so far on the server side with Coldbox, Yet, I would like to avoid compromising any opportunities offered by the VueJS framework for client development, such as Vuex, API calls with axios and API proxying for example.