Using Vue CLI For a Small Component in a Larger Project

Hristiyan Dodov
Jan 25 · 3 min read
Photo by Ilya Palov on Unsplash

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:

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.

The Solution

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:

  1. I opened the parent folder of my project in a terminal.
  2. I ran vue create my-project where my-project was the actual folder name of my main project. The CLI asked if it should overwrite the project or merge it. I chose merge.
  3. After the project was created, my package.json was overwritten and only had the Vue dependencies listed in it.
  4. I reverted my old package.json and installed the following packages with npm: @vue/cli-plugin-babel, @vue/cli-service, vue-template-compiler, and vue.
  5. I added the following npm script in my package.json:
"scripts": {
"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.

I have:

<div id="calculator"></div>

in my page, and:

<script src="/assets/js/calculator/build/app.js"></script>

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.

Conclusion

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.

You can check my question on StackOverflow for more info.
Follow me on Twitter if you want, too.

Oblik Studio

a cross-disciplinary design studio and the people behind it

Hristiyan Dodov

Written by

Full-Stack Developer at Oblik Studio

Oblik Studio

a cross-disciplinary design studio and the people behind it

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade