Tag: data driven vue

What Is The Vue CLI – A Mini Crash Course Guide

As you progress in your level of knowledge with VueJS, you will gradually begin to require more and more horsepower with regard to the tooling that you need in order to get your project set up and running.

For most people who learn VueJS, the path to getting setup typically begins by simply loading in the VueJS library that you need via a CDN in script tags.

After you have started to get the hang of what you can do with Vue and are starting to both understand and need to use the more powerful features that it comes with, such as Vue components (link to a post here about Vue components) and the Vue router, you will begin to see that the amount of setup needed to get up and running is much more than you’d probably like to do with the standard, non-Vue specific method. That being the simple addition of a script tag src, as mentioned above.

This is when you’ll probably start to look into tools like the Vue CLI. A command-line utility that makes the setting up of a Vue project, complete with all the functionality that you need to create a complex modern application as easy as a simple command-line statement:

vue create my-project

Why the Vue CLI is necessary for most Vue projects

Just as construction within human civilization evolved in terms of housing, with more and more complexity being solved by various forms of scaffolding, so in the same vein, as the web evolves, various forms of scaffolding are now needed and being made in order to make the web-based application building process easier.

Compared to jQuery, increasing complexity on the web as time has progressed, as well as what that complexity has necessitated, means that much more is needed in terms of scaffolding, to meet the users’ performance demands.

A highly complex web needs an equally complex response in terms of tooling for web builders.

This is what tools like the command-line utility that is the Vue CLI do for you.

The Vue CLI makes the building of complex coding infrastructures that can manage the new complexity that is now on the web, easier.

Complexity meets complexity, but with a tool like the Vue CLI, that complexity is now simplified for the user.

How To Use The Vue CLI – Step By Step

Before you can get to creating your Vue CLI initiated app, you must first install the Vue CLI from npm.

You do this by typing the following npm command into your terminal:

npm install -g @vue/cli

You may also install it with yarn, if you have that package manager installed, like so:

yarn global add @vue/cli

Once you’ve done this, you may now create your Vue project by typing in the following command:

vue create hello-world

We’ve used ‘hello-world’ here as our project name but you may choose any other name that you like.

That’s all there is to it. You now have installed a complete Vue project.

But what does that mean in terms of what we can now do?

How A Vue CLI initiated App Works, And What It Allows You To Do

Once you’ve installed your Vue project, you’re now probably wondering how it works in terms of the folder structure and what everything in it does.

There are only a few key areas that we will focus on in this tutorial, as this is simply a mini crash course.

These are the main areas that interact within the app, and the ones that you’ll need to focus on most of the time when you’re in the process of development.

The understanding of how these areas within the app work will also allow you to further gain a grounding in Vue.

Before we begin to get into what these key areas are, and the ways in which these key areas work, let’s first take a little look at the overall folder structure in the app we’ve just created.

‘hello-world’ Vue App Folder Structure, The Most Important Parts

The below section are normally within your’src’ folder, inside of your Vue app. This is where your real Vue app lives. And whose contents we will be covering below. In the root directory before you get into src simply is your basic dependency files, such as your ‘node modules’. These are the various key scaffolding elements that are available within your Vue CLI initiated Vue app.

Below, we will simply focus on our Vue app src folder.

[Picture of the Vue App Src folder]

Components

The most important folder to notice here is the ‘components’ folder. This folder holds your Vue components, which are basically self-contained full mini-Vue apps within your overall Vue Application that basically represent a segment of your page. They contain the HTML, CSS, and JavaScript (most of it your Vue code) that you need in order for your Vue functionality to work.

Main.js – The Command Center of Your Vue App

The main.js is the main startup area of your Vue app, where data and processes are routed, it’s here where the main Vue instance is initiated and set ready to go. In most tutorials and by most programmers, you will see a file like this being referred to as your ‘entry’ file, for this reason. This is also where the components that we mentioned previously are connected to the instantiated Vue instance.

App.vue

[picture of App.vue file here.]

App.vue is where we add in and combine the references to all of our app components, as is seen above. We simply add the component element tag name within our main App.vue element and then reference that as one of our instantiated components in our Component’s JavaScript below, within the same file.

This is the file that we then reference within our main.js entry file, in order to load all of our components up.

Assets

We keep our assets such as image files and logos here. For easier referencing from within our app.

On Module Bundlers in the Vue CLI, The Middle Man Of Your App

We mentioned module bundlers above as a standard part of the Vue app creation and running process.

The basic description of a module bundler is as a middle man within your app, that converts the app’s code, which when you’re writing it is not recognizable by the browser that will be running it, down into something that the browser can then run and understand.

The bundling process works by typing in a bundling command on the command line from within your app directory. Like this:

npm run build

This will load the compiled, browser readable files into a /dist folder that can then be used to display your app.

Our /dist folder is where our compiled HTML, js, and CSS is kept once our Vue code has been run through our module bundlers.

All of the above works in order to make your Vue app runnable by most good, modern web browsers.

All of this functionality and the way that it works is available out of the box in the Vue CLI. Once you begin to use the functionality provided, such as the core functionality described above, you will begin to understand the full power of the scaffolding provided by the Vue CLI.

The final feature we will mention in this point, just to show how useful it is, is the Vue CLI serve command.

Like this:

npm run serve

When this is run from within your Vue app directory, it will load up a simple web server and allow you to see your Vue app in action. A link to it on your localhost, along with the relevant port that is running it, will be available on the command line.

Pretty great right?

I hope this gives you a good general overview of what the Vue CLI can do for you. When you start to use it, you will gradually begin to see what it can help you do.

So don’t wait around. Get active with it today, and see just how powerful a scaffolding tool the Vue CLI is.

To be the first to know when we publish a new post or book, you may also subscribe to our email list below


What The Vue Instance Is, And How It Unlocks The Magic Of VueJS

What Is The Vue Instance?

Before we can start to do anything with VueJS on our webpage, we first need to create a way for Vue to initialize and then ‘bind’ itself onto that page.

Just as in jQuery, nothing happens until we initialize our document ready function, like this:

$( document ).ready(function() { console.log( "ready!" );});

In Vue, nothing happens until we create our Vue Instance, like this:

<script>
new Vue({
    el: '#app'
    data: {
        
    }
})
</script>

Within the bounds of this Vue Instance, which is just a simple JavaScript object, we can write the code that Vue will recognize and then execute onto the page.

Let’s first take a deeper look into what is actually going on with this Vue instance object, and then we will talk more about what it can allow us to do on our HTML page specifically, and how it unlocks the magic of Vue.

Inside The Vue Instance Object

On the first line, we begin with the instantiation of our class object, which bears the title of Vue, like this:

new Vue({ }}

This creates and initializes the Vue instance within our browser.

Next, within our created Vue instance, on the first line of our object, we add in our ‘el’ option, which looks like this:

new Vue({
    el: '#app'
})

What this ‘el’ option does is simply ‘bind’ our Vue Instance to an element within our HTML (in this case, one with an ID of ‘#app’), allowing us to apply our Vue functionality to everything that is within that element.

Putting it all together, it would look like this:

<div id='app' </div>

new Vue({
    el: '#app'
})

As you can see, our <div> element, with an ID of ‘#app’ has been bound to our newly created Vue Instance. Another way that we can refer to this ‘binding’ of an element by Vue within the Vue instance is as a ‘mounting’ of, or to ‘mount’, an element. It means the same thing. Simply that we have attached our Vue instance to that element, in order to activate Vue’s functionality within that element.

A key difference to note here, coming from jQuery, is that rather than applying functionality to the entire webpage, as is done with jQuery, in Vue, functionality is only applied to a specific section of the page – one that is bound to a Vue instance (of which there can be many). In this case, our <div> element, with an ID of ‘#app’.

Lastly, we have our ‘data’ option. Which as you’ll see soon, is one of the most important parts of our Vue instance in terms of functionality. It looks like this:

new Vue({
    el: '#app'
    data: {
        someText: 'helloThereText'
    }
})

As you can see here, after creating our Vue instance and then mounting it onto our ‘#app’ element, we then set some data within our instance. This gives our mounted <div#app> element access to the data that is within our Vue instance object.

That data can now be used directly within our mounted HTML element, like this:

<div id='app'>{{ someText }}</div>

By placing the data variable from our instance within double curly braces, we allow Vue to recognize and then ‘interpolate’ the data as being from our Vue instance, in the example above. This data is then transformed into the text that it contains within the mounted HTML element.

On page load, the data held within our ‘someText’ variable above will be displayed out onto the loaded page as the text, ‘helloThereText’.

How The Vue Instance Unlocks The Magic Of VueJS

So from the example above, we can see that a Vue Instance is basically an object that is created in order to allow us to attach Vue functionality to our HTML.

Let’s now take a slightly closer look at what the Vue instance is and what it can do. The explanations below will aid you greatly in getting a deeper understanding of what Vue can do for you, and in general, what Vue is all about.

A Data-Driven Approach To UI Manipulation

Because Vue is primarily ‘data-driven’, which means that what happens on the page is simply a reflection of what happens in the data held by Vue, along with the changes to that data, the Vue instance can be thought of as a syncing agent that simply translates changes in the data held by Vue, to changes in our UI. And by doing so, keeps our data -> view connection ‘in sync’.

An example of this can be seen with the way that view allows us to handle conditional logic on our HTML page.

Below we are displaying or hiding an element within our Vue instance, depending on whether or not data (as a variable within our data object) is set to either true or false.

<div id='app'>
    <h1 v-if="is_it_true">{{ someText }}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            someText: 'helloThereText',
            is_it_true: true
        },
    });
</script>

In the current way that it is set up (with Vue’s v-if attribute, Vue attributes allow us to add Vue functionality directly to our HTML elements), our h1 shown above will show on page load. With the text ‘helloThereText’.

If we were to change the value held by our is_it_true variable within our data option to false, the h1 will disappear.

This is what we mean when we say that Vue is data-driven. It is driven, and changes on the webpage are made, by what happens in the data that is held by its instances.

The Vue instance, by giving us a simple ‘command center’ where we may set, and when necessary change our data, helps us to unlock the magic that is data-driven Vue.

To be the first to know when we publish a new post or book, you may also subscribe to our email list below