Exercises That Build

We know that our Shopify app developer community has a number of fans of JavaScript, and we’re also big fans of some of its frameworks, like React. As the JavaScript community continues to build and innovate, it feels like any JS dot exists. However, among the many new frameworks, Vue.JS has been among the most talked about in the community. In fact, it’s not only a very popular open source project, but it’s also the second most popular JavaScript framework on GitHub. To help you improve your skill set and understand what this framework is all about, we recently teamed up 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 quickly create user experiences.

Front-end for web applications. Before we dive into a recap of Cassidy’s steps to 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 Publicly released on GitHub in February 2014, Vue.js was brought Australia Business Fax List to life by a former Google developer, Evan You. He had long been drawn to JavaScript because it allowed for an easy way to create something and share it instantly. After being hired by Google, he spent much of his time prototyping in the browser. His team worked to build things that were quick to set up, but still tangible. For this purpose, one framework they sometimes used was Angular.

Self-taught for Everyone!

While Angular helped speed things up. Offering data binding to handle the DOM without having to touch it directly.  There were still additional concepts that required code to be structured.  In a certain way. In an effort to further simplify.  The coding process and help developers move faster, Evan worked to create something that had these efficiencies, but was even more lightweight. You may also be interested in: The essential list of resources for Shopify app development. Getting started with Vue.js Vue.js was designed to be accessible so anyone with a basic understanding of HTML, JavaScript, and CSS can easily get started with this framework. There are also many great templates for beginners that you can start with.


After choosing the API you want to build on, visit the Vue.js repository, open your consoles, and get coding. You’ll start by installing NPM globally and then loading the CLI: npm i -g vue-cli Then initialize Vue to start a new project and choose a startup project. In this demo we used the webpack. vue init webpack Once the project is initialized, it will 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 specify whether you want to run tests; we opt for no. Vue.js Tutorial: Initial Configuration Initial configuration after installing the webpack template. Once these basics are specified, you’ll use npm installto install all the libraries that Vue specifies you’ll need.

Get to Teach!

Once that’s complete, you’ll use it npm run devto start the development server. Done – you now have a basic web app UI! Vue.js Tutorial: Application Live Vue.js web application UI, created with a webpack template. Now that we have a live app, it’s time to get under the hood and customize it. You may also be interested in: [Free Webinar] How to Create Your First Shopify App. Application UI Customization As with most web applications, there is an index.html. Between all this code, the entire application lives within a small line <div>/div>. In fact, if you wanted to create a stand-alone vue app that would live inside a larger web app, you could do it inside this app div. Vue.js tutorial: html index Index.html of the application, inside the text editor. If you also want to take a look at all the libraries that Vue has to offer.

Leave a comment

Your email address will not be published. Required fields are marked *