At Oblik, we’re building a project with PHP and Kirby CMS and we had a request about a widget that performs complex calculations on the homepage based on user input. That calculator was complex enough to justify the addition of a reactive framework, and I chose Vue.
The project has a bunch of stuff going on in its codebase and I wanted to keep things as clean as possible. At the same time, I wanted to use Single File Components and Babel to speed up my workflow. I was in a tough spot.
My options were:
- Use Vue CLI and its instant prototyping.
- Compile SFCs with Browserify + Vueify.
- Create a project with the Vue CLI Service.
I couldn’t use instant prototyping because
vue serve starts a new development server where you build your component. I needed to build my component inside our main project, which is served by Apache.
I could have used Vueify — we already use Gulp in our project anyways. What stopped me is that Vueify is deprecated and is no longer supported. Besides, I’d need to add a bunch of stuff in
gulpfile.js just to make Babel work.
Finally, I could have created a Vue CLI Service to create a brand new project inside our main project. Initially, I didn’t want to use that because it would have polluted the project too much. An additional
node_modules, and additional
package.json… I could have isolated it in a Git submodule, but that would have been too much hassle for such a small piece of the project.
After creating a project with Vue CLI Service inside the main project and figuring that I don’t like this approach, I got an idea — why not merge my main project with a new Vue project? Here’s what I did:
- I opened the parent folder of my project in a terminal.
- I ran
vue create my-projectwhere
my-projectwas the actual folder name of my main project. The CLI asked if it should overwrite the project or merge it. I chose merge.
- After the project was created, my
package.jsonwas overwritten and only had the Vue dependencies listed in it.
- I reverted my old
package.jsonand installed the following packages with npm:
- I added the following npm script in my
"calculator": "vue-cli-service build assets/js/calculator/main.js --watch --dest assets/js/calculator/build"
The project’s folder structure remained the same, except for a few additional packages in
node_modules. I decided to put my component files in
assets/js/calculator/. There, I have
main.js which is the main component script, and
build which is a folder containing the processed component.
in my page, and:
in the site footer. When I open the homepage, the component is rendered.
To modify the component, I simply run
npm run calculator in a terminal, which spins up the CLI service. It monitors the
main.js file and builds the component on each change. Once the build is complete (which happens in under a second), I refresh the page and the updated component is there.
I was able to use the Vue CLI and all of its nice features to develop a small widget for our project without polluting the codebase. Also, if I ever have to develop another widget with Vue, I simply create a new npm script.