Getting started with Vue

Hello World!

I just had to open with the most famous programming line since this is my first piece on Medium.

Vue is a javascript framework for building user interfaces. It is capable of powering sophisticated Single -Page Applications (SPAs). It is one of the three most popular modern JavaScript frameworks, with the other two frameworks being Angular and React.

Vue has a reputation of being fairly easy to grasp and as straightforward as it gets when it comes to writing the code. It can also be used to target Native when used with a combination of other libraries and tools.

Now let’s get started with setting up our first Vue project.

Environment

In other to get Vue (or any of the Javascript framework) working on your machine you must first install NodeJs and NPM,

NodeJS is a Javascript runtime capable of running Javascript code outside of a browser.

NPM which is an abbreviation for Node Package Manager is used to install and manage dependencies used in the project. It will be installed alongside Node.

To install Node locally visit the official website downloads page and choose the download best suited for you, whether on a PC or Mac. Preferably download the LTS (Long Term Support) which is the most stable version at that point.

At the time of writing this, the LTS version is v12.13.0.

The installation is pretty straight forward, accept all the defaults and click on finish/done to complete.

To check if it is installed on your machine, open up your CLI and run the following command

node -v

you should see a version number of

12.13.0

also, run this to check your npm version

npm -v

result should be

6.12.0

Note that if you already have Node installed your version number might be different, which is perfectly okay.

Now to install Vue itself, still in the terminal run the following command to install the Vue CLI

npm install -g @vue-cli

npm is our package manager, install is the action in this case, -g is for global, this will allow us to access the vue-cli from any folder on the machine, @vue-cli is the name of what we are trying to install.

Check your Vue installation by running

vue --version

Creating a new Vue project

Time to create our first project. To do that run the following command vue create [project name] For example, let's create a project named hello-world

vue create hello-world

you are then presented with some preset options asking you if you want to start your project with some Vue supported libraries or go with the default. For now, let us select the default, use the arrow keys to move between the options and press enter key to select.

Vue installation preset options

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

ESlint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

your installation starts immediately, as long as you are connected to the internet, a folder is created for the project and all the default dependencies are installed, it might take a minute depending on your internet speed, you get a screen similar to this

installing vue files on your machine

When all installation is done, you see this

after successful installation

run the following command to enter your project folder and run the application

cd hello-world 
npm run serve

The application compiles, and when it is done you see something like the following, the application is served on your local machine in development mode, and on a particular port, in my case 8081

running the application using npm

Visit the address in your browser ie http:localhost:8081 and you should have the official landing page of Vue Js.

Congratulations on creating your first Vue app! Now let's check out what makes up our app, and where all that we have on that landing page came from.

-Project Structure

Navigate to your project folder in your file explorer, and open in any editor of your choice. I use Microsoft’s vs-code editor, you can install here.

After you open the folder in your editor, on the left pane you have the folder files as such

projects files and folders

-Node_Modules

The node_modules contains the Vue core and other dependencies. When we install/add new dependencies, the files are stored in the node_modules and can be accessed from there.

-Public

The public folder contains the single Html file where our app renders.

the index.html page in the public folder of vue project showing the div with the id of app

The compiled Javascript code targets the <div> with the id of app and injects the built files into that div. Just like the common ID tag targeting done using vanilla Javascript.

-package.json and other config files

package.json contain a JSON object containing information about the project, the name, version, scripts used to run the project, dependencies, and other app configuration information.

.gitignore contains a list of files and folders we wish to ignore when running a version control system The files listed in the .gitignore will not be pushed to our repo by default.

README.md is our standard read me text file, to pass information about the project to other users or collaborators.

babel.config.js houses the babel configurations for the project.

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree or package.json.

-src

This is where most of our work happens, this is where we write Vue codes and create our components and store the project assets. It also contains one very important file name main.js

main.js is the entry point into a Vue application, it is where the root Vue instance is declared and configured. The code in the main.js looks like this

the main.js

On line 1 above, we import Vue from the ‘vue’ npm package, which is located in our node_modules/ folder.

On line 2, we import the main Vue component named App from ./App.vue.

On line 6–8, we mount our component to #app — this is where we declare <div id=”app”> in our public/index.html as the rendering target of our VueJS app.

Now let’s take a look at the main Vue component App.vue which is also in the src folder. Vue uses the Single File Component (SFC) model, where the markup, style, and script are contained in one single file with the .vue extension.

This is how our App.vue SFC looks like in this case:

the vue root component — App.vue

In the script tag we import another component HelloWorld from './components/HelloWorld.vue', we then have our Vue instance defined in the export default object. In this Vue instance, we have to register the imported component as seen here:

script section of the App.vue

Displaying a simple list using data, props and in-built directives

First of all, what are data and props? Data is used to define properties in a particular component. In an SFC, data is a function that returns a set of properties that has been defined in the function.

If we wanted to add a text property to our App.vue component we would do it using data as such

export default {
  name: 'app',
  data: function () {
    return {
      text: "Vue is awesome" 
    }
  },
  components: {
    HelloWorld
  }
}

Accessing the text property we have just defined in the template would require us to use a data binding technique known as Interpolation.

To display the content of text in template, add a paragraph tag to the template in App.vue:

<p>Text:  {{ text }} </p>

Now run the application using the npm run serve command in the cli. The text gets displayed in the browser.

- Passing data to another component.

This where props come in, with props we can define a property in one component and then pass it to another component. Let's try passing an array of basic web technologies from the main component App.vue to child component HelloWorld.vue.

Now let’s define another property in the data

export default {
  name: 'app',
  data: function () {
    return {
      ...
      web: ['HTML', 'CSS', 'JS']
    }
  },
  components: {
    HelloWorld
  }
}

The new property web is an array of string. And we're going to pass this to the HelloWorld component which we already have registered in the App component.

In the template, notice we already nested the HelloWorld component in the parent div, with data being passed to it from the app component. This is part of the default Vue landing page setup:

But we are going to pass another data as prop and receive it in the HelloWorld component by using the v-bind directive, which is an in-built Vue directive, it allows us to bind to any data we are passing, such that the data can be dynamic.

Still in the template section of the App component modify the <HelloWorld /> tag to look like this

<HelloWorld msg="Welcome to Your Vue.js App" v-bind:web="web"/>

Notice that the content of msg is specified when passing it as a prop to the HelloWorld component, in a case as such the v-bind is not needed.

The App component’s template and script should look like this now:

final app.vue component

Now to receive the newly passed prop in the HelloWorld component, open up the component and in the script section, specify the name of the prop you are receiving (which is the name after the v-bind:), in this case, web. Also, Vue requires us to specify the data type which is Array. The script section should look like this:

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    web: Array
  }
}
</script>

Now we can access the web prop in the HelloWorld component as well, to display as a list in the template we also use another directive called v-for. The v-for directive is used to iterate through and render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on and then we can use the interpolation technique to display each item

Add this line anywhere in the template of your HelloWorld component.

<li v-for="item in web">{{item}}</li>

Now you may get a warning in your editor, saying elements in iterations expect to have a v-bind:key directive, what this means is that each item in the list required a unique identifier, in order to track them, so we are going to add an index and bind the key to the index. Modify the line to look like the following:

<li v-for="(item, index) in web" v-bind:key="index">{{item}}</li>

refresh your app in the browser and you should see both the text and the web list.

final view of the landing page in the browser

And that’s it, awesome!

So far we have been able to:

• set up the development environment for Vue.
• create a new Vue project.
• run our application using npm.
• look at the structure of a Vue project and a single-file component.
• define property in an SFC.
• pass a property as props between two components.

I am transitioning to Vue js myself so I do this to share what I am learning and to document progress. In the next part of this, I am going to take on directives, both in-built and custom.

Cheers.