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)
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.
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.