We know that our Shopify App Developer community has several JavaScript fans, and we’re big fans of some of its frameworks too,like React.
As the JavaScript community continues to build and innovate, it feels like anything dot JS exists.Among the many new frameworks however, Vue.JS has been among the most buzzworthy in the community.In fact, not only is it a wildly popular open source project, it’s also the second most popular JavaScript framework on GitHub.
To help you level-up your skill set and understand what this framework is all about, we recently partnered with Cassidy Williams, Senior Software Engineer at L4 Digital, to show you the ins and outs of Vue.js and how it can be used to rapidly build front end experiences for web apps.
Before we dive into a re-cap of Cassidy’s steps for getting started with Vue.js, here’s a little background on why it was created, and how it differs from other popular frameworks, like Angular and React.
Origin of the Vue.js framework
Launched publicly on GitHub in February 2014, Vue.js was brought to life by a former Google developer, Evan You. He had long been attracted to JavaScript since it enabled a straightforward way to build something and share it instantly. After being recruited by Google, a lot of his time was spent on in-browser prototyping. His team worked to build things that were quick to set-up, but still tangible. For this purpose, a framework they sometimes used wasAngular.
While Angular helped speed things up, offering data binding to deal with the DOM without having to touch it directly, there were still extra concepts that demanded code be structured a certain way. In an effort to further simplify the coding process and help developers move faster, Evan worked to build something that had these efficiencies, but was even more lightweight.
You might also like:The Essential List of Resources for Shopify App Development.
Getting started with Vue.js
Vue.js was designed to be approachable, so that anyone with a basic knowledge of HTML, JavaScript, and CSS could easily get started with this framework. There are also many greatbeginner templatesyou can get started with.
After choosing which API you want to build on top of, visit theVue.js repository, open your consoles, and get coding! You’ll begin by installing the NPM globally, then loading the CLI:
npm i -g vue-cliThen, initialize Vue to start a new project, and choose a starter project. In this demowebpackwas used.
vue init webpackOnce the project is initialized, you’ll fill-in all the details, such as name, project description, and author. You can also choose the Vue build. In Cassidy’s tutorial, the default build was used.
You’ll also install the router and specifying if you want to run tests — we opted forno.
After these basics have been specified, you’ll usenpm installto install all the libraries Vue specifies you’ll need. Once that’s complete, you’ll usenpm run devto start the dev server. Voila — you now have a basic web app UI!
Now that we have a live app, it’s time to get under the hood and customize it.
You might also like:[Free Webinar] How to Build Your First Shopify App.
Customizing the app UI
As with most web apps, there’s an index.html. Among all this code, the entire app lives within the one little line< div id="app">/div>. In fact, if you wanted to make a standalone vue app that lived within a larger web app, you could do so within this app div.
If you also want to take a peek at all the libraries Vue gives you, you can do that inpackage.json.
Now ontomain.jsaka the main JavaScript. Here it imports Vue, the app, and the router. Also specified is that the router uses the app templates and pulls in the app components. This is what makes up the backbone of your app.
Now in the app component —app.vue— you can view the structure and style. Note thatapp.vueis a Vue.js file, and a Vue file always contains:
- A template
- A script
- A style
In Vue, the given style defaults to being applied globally, but if you want it to become specific to the component itself, you’ll addscopedwith