At work, I use webpack all the time but it is with laravel. On this blog, I haven’t written much about laravel (something that I eventually want to correct). I do want to address the deficit of webpack content today, though.
Let’s start with a basic Vue.js app (not unlike what you’ve seen on the blog, already).
See the Pen
Pizza-based Vue.js demo by Joe Steinbring (@steinbring)
on CodePen.
In the above example, we have a simple web form that updates a paragraph in real time. It has a little bit of everything. It has a computed property, a watcher, conditional styling, and conditional logic. This codepen isn’t the end-result, though. Our goal is to transform it into a Vue CLI app and to set up hosting for it on Render.
If you follow the Vue CLI guide to install Vue CLI and create a project, you end up with a basic “starter app”. This can be run locally (using vue CLI) or it can be deployed to Render.
The meat and potatoes of the app is within the src folder. It contains a components folder, an App.vue file, and a main.js file. You can leave the main.js file alone, for the most part. Most of what needs doing is within App.vue and the components folder. So, how did I move this sample app from the codepen to a CLI app? The first step was to create a PizzaForm.vue file in the components folder. This contains the template, javascript, and style rules from the codepen. The second step was to npm install beufy in order deal with the bulma dependency. The third step was to edit App.vue to reference PizzaForm.vue.
Once you get that far (for the most part) you are done. Back in a previous post, we covered hosting content on render. To host this app, you just need to follow those steps but use the build command yarn build and the publish directory of dist. You can check out the github repo at github.com/steinbring/vue-demo.
Want to see the end result? https://vue-demo.jws.app/
Have any questions, comments, etc? Feel free to drop a comment, below.