Forem: Lisa Armstrong

I've Been Working from Home for Years, Here's Some Tips

Lisa Armstrong — Wed, 18 Mar 2020 20:04:09 +0000

Most of my career has been working from home / remotely. Overall, I love it, but it takes a while to adjust. It's a process, but here's what I figured out so far...

Know Yourself

The hardest thing is you're a manager to yourself -- and you can be a tricky employee. 😉
Seriously, just be aware of what kind of worker you are and start with that.

When are you most productive? What motivates you? How do you handle distractions, interruptions, boredom, being alone, stress?

Time to be honest with yourself about yourself. No need to be critical, just figure out what kind of environment and schedule works for you and build on that.

Boundaries Are Important!

The biggest danger of working from home is home life and work life can get mashed together. As a result, you can feel like you're working all the time -- and so does your family. Having good boundaries with yourself, your company and your family keeps everyone happy.

Figure out when and where you work. What are your hours? Make sure your work space feels separated from the rest of your home. Even if your desk is in the middle of it all, during office hours, make sure it's an office, not a kitchen table. When you're done work, put the computer away and turn it back into a place to live.

Good boundaries need to be clear and consistent and enforced-- especially to yourself -- that's the hard part!

When it's office hours, be at your 'desk' in work mode. When work is done, walk away and be your home self again.

When you're clear about office hours and location, it makes it easier for those around you to know when and how to approach you. Your employer can expect a response from you during these hours, your kids can expect a hug from you the rest of the time.

Communicate this to all concerned and make sure you stick with it!

It's also a healthier head space knowing you're done for the day. If you get an idea after work, great! Write it down, deal with it tomorrow at work. You're done for the day.

Routine is Good

Figure out a routine that works for you, and stay with it!

Have a routine for going to work. Figure out what works for you and do it every day. Do something that helps you shift to 'work mode'.

Routine at the end of the day is good too. Be strict about quitting time, have a routine at the end. Close the computer, turn off the light and go to the gym. This is a way of changing gears so you don't stay in work-mode.

I've found 'changing gears' is important, give yourself some time or routines to get in and out of work mode. In real life, it's the commute, you don't have that at home -- thankfully -- but do allow yourself some times to de-compress after a day at the office.

Exercise Keeps You Sane

Whether it's part of your morning or evening routine make sure you include exercise has part of your day. It's very easy to stay cooped up and not moving at all, and of course you know this isn't healthy.

Don't be afraid to schedule a 'sanity walk' or 'sanity workout' during the work day and make it a priority. Honestly, your productivity and mind-set will be better. This doesn't mean you're goofing off, take a walk and make some calls, mull over something you're working on. A good walk fixes a lot of problems!

Bonus points for getting out in nature. It's a fact, being around the good earth is good for us, so get some fresh air if you can.

Communication is Oxygen

The big fear your clients / reports have with you working at home, is you're goofing off. They need to know you're working and -- most importantly -- see what you're doing. This is why communication is so important with remote work -- like oxygen -- you die without it.

Start your day with a check-in. Tell your team you're in the office, what you're working on, goals and objectives for the day. When the day is over, report what you got done, issues etc. and what you'll be doing the next day.

This is also a good way to keep yourself focused on important taks and feeling like you've accomplished something.

I like to make my work available to clients when I can. They're welcome to have a look at a development site to see progress -- transparency is good.

Remember: It's not possible to over-communicate, so let the team know what you're doing all day.

Keeping Momentum

When you're done for the day, it's a good idea to jot down what you want to start with the next day. That way when you come in, you got something to start with. This keeps you focused on productive things.

Some days, well, you're just not into it, for whatever reason. That's ok, you can't be a super hero every day. Usually it's a good time to do the 'mindless task' and get caught up. If you're finding there's a lot of these days, time your manager self has a talk with your worker self. Maybe you need a change in routine? Need some incentives to get going again? Maybe it is time for a break.

The trick here is to be honest with yourself about it. Don't get side-tracked into house stuff, it will not help.

The other side of the equation is you're on a roll and want to keep working -- almost done, a couple of more hours! That's great, but it's also the highway to burn out. Sometimes pushing through makes sense, but mostly not. Write down what you want to do next, then shut it down for the day. This gives you something to look forward to tomorrow.

Be in the Real World

When your day is over, make it a point to spend time in the real world, Talk to a real person, look at something that isn't on the screen, play with the dog. You've been in your head all day, give it a rest and enjoy the physical world. It keeps our balanced.

Setting Up Your Office

It's easy to fuss around with chairs and gadgets when you're setting up. The important thing is make sure it works for you. If working at home is a long term thing, create an office space that can be separate from the rest of your home. Find a spot with natural light and a decent view -- good for the soul.

Spend money on a good chair, set up your office so you can change position and move around. I just put my monitor on an adjustable arm so I can move the screen -- life is better!

Also, if your can move your office outside, it's worth it. I like to work on the deck in the summer -- best corner office in the city IMHO.

As for equipment, make sure it works, you don't need to fight with tech issues when you're trying to get stuff done.

It's a Process

You won't get it right the first time, it's a process. Things change, you need to adapt, you'll figure it out. Even after all these years, I'm still working on it.

Anyone else have some tips for making working at home easier>

Using Vue in jQuery and JavaScript Sites

Lisa Armstrong — Sun, 01 Mar 2020 02:13:40 +0000

So you've got a legacy project on your desk. You know the type, from back in the day when jQuery was the go-to tool. Now that project needs an update and although jQuery is still a useful tool, you know doing the update would go a lot quicker in Vue.
Ok, let's be honest, you might be looking for an excuse to use Vue -- I won't tell.

The problem is, while the changes are a good candidate for Vue, there's still the rest of the site in jQuery or vanilla JavaScript. You don't want to refactor the whole thing, but dang! Vue would be awfully handy in there. So the question is:
Can I use Vue in a jQuery or vanilla JavaScript site?

Yes you can.

It's All JavaScript Anyway

Although jQuery and Vue are different, they both work with the DOM and use JavaScript.

That means using them in the same file shouldn't be an issue. Think of them as running parallel to each other, like two lanes going the same way on a highway.

In this tutorial, we're going to add Vue functionality to a simple jQuery page and show you how Vue and jQuery (and vanilla JavaScript) can work together in harmony.

We're assuming you know jQuery / JavaScript well, and have worked with Vue. It's nothing fancy, just basic concepts.

The Project

Let's say we're working with an HTML file where you make a selection and it uses jQuery to tell you what's been selected.

This is a standard type of app where the user makes a choice and the code responds. The HTML looks like this:

<html lang="en">
<head>
    <!-- Load JQuery -->
    <script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>
    <script type="text/javascript">
        function doFoodGroup(){
            //Returns what is selected
            var selected = $("input:radio[name ='food_group']:checked").val();
            alert('You selected: '+selected)
        }
    </script>
    <style>
        .demoDiv{
            display: inline-block; 
            width: 49%;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <h1>JQuery and Vue</h1>
    <div class="demoDiv">
        <h2>Select a Food Group:</h2>
        <input type="radio" name="food_group" value="fruit" onclick="doFoodGroup()"> Fruit
        <br>
        <input type="radio" name="food_group" value="veggies" onclick="doFoodGroup()"> Veggie
    </div>
</body>
</html>

Adding functionality through Vue

We're going to update the code, so when a user makes a selection, their choice is displayed on the page. We're going to use Vue to code this, so let's load it.

Adding Vue

To use Vue, you need 3 things:

Load Vue in the page
Build your Vue code
Give it an element on the page to work in

Let's set it up:

1. Add Vue to the page through the header:

<!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. Create a file with the Vue code in it, and load it in the HTML header:

The file called 'vue_demo.js'.
It's going to list fruit and veggies, so it looks like:

var vue_choices = new Vue({
    el: '#app', //Attach to element id app
    data: {
        fruits: ["apples", "pears", "peaches", "cherries"], 
        veggies: ["lettuce", "peas", "carrots", "tomatoes"], 
    },
})

Now load the file in the HTML header

<!-- Load script file.  'defer' loads after body is generated -->
<script src="vue_demo.js" defer></script>

3. Create a DIV for Vue to use:

<!-- Div where Vue runs -->
<div id="app" class="demoDiv">
</div>

Not much to see here, so add some code to display the list in the Vue div:

<!-- Div where Vue runs -->
    <div id="app" class="demoDiv">
        <div>
            <h3>Fruit choices:</h3>
            <ul id="fruit_list" style="list-style-type: none">
                <li v-for="fruit in fruits">
                    <input type="radio" name="food_selected" v-bind:value="fruit">{{ fruit }}
                </li>
            </ul>
        </div>
        <div>
            <h3>Veggie choices:</h3>
            <ul id="fruit_list" style="list-style-type: none">
                <li v-for="veggie in veggies">
                    <input type="radio" name="food_selected" v-bind:value="veggie">{{ veggie }}
                </li>
            </ul>
        </div>
    </div>

Note: This is a list of radio options because we're selecting them later.

When you look at the page, you should see jQuery 'Select a Food Group' div in one area and Vue's list of fruits and veggies next to it. So, you can have a Vue running in a page using jQuery -- problem solved!

Of course in real life, you'll probably need Vue to interact with the rest of the page. Data needs to go back and forth between Vue and JavaScript.

It's time to change lanes.

Moving Between Vue and Javascript

Because Vue and Javascript are parallel, you can pass variables between them. But, like changing lanes while driving, be careful you don't collide with something!

When working with Vue and jQuery / JavaScript there's a couple of caveats to keep in mind:

1. Stay in Your Lane (When You Can)

Remember you've got two places to write your code -- DOM level JavaScript / jQuery or in Vue. It's easy to be on autopilot and start writing code in Vue, when it would really work better in DOM JavaScript. The next thing you know, you're doing contortions trying to get something on the screen!

GOTCHA! Where you put your code matters.

If your code is in Vue and you're trying to change a div outside of the Vue div (or vice versa), you can run into problems. Sure, there's ways around this, but it can be needlessly complicated.

As a general rule: Put your code where the element you're changing is.

If you're changing something within the Vue div, then let Vue handle it.
If you're updating a div outside of the Vue div (in the document), then use the regular JavaScript to deal with it.

In other words, stay in your lane (life will be easier).

2. Change Lanes Politely

Of course sooner or later you'll have to pass information from DOM JavaScript to Vue and back again. You need to change lanes.

When changing lanes while driving you make sure the other lane knows you're coming, and you behave predictably. It's the same idea when passing a variable between DOM JavaScript and Vue. Make sure the other side knows what's coming and can deal with it.

As we're about to see, it's not a big trick and usually done through functions.

How To Pass Values to Vue

When you first look up how to pass a value to Vue, you probably found terms like: props, emit, components, parent/child. Do I need to build a component to pass data?

Oh my, this feels complicated!
It's not.

Gotcha! You don't use components to pass parameters into Vue.

Components are great things inside Vue. We're passing data from outside Vue, so it doesn't apply. It's the wrong tool for the job -- it's actually simpler than that.

Remember: Vue is a Javascript Object!

When you loaded Vue, it became an object within Javascript.

The code: var vue_choices = new Vue({
means you've created an JavaScript object called 'vue_choices' in the document. That means it's available to JavaScript in the document. In fact, you can get see the vue_choices object through the console log in the DOM JavaScript.

Ex.: console.log( vue_choices ) would display:

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$attrs: (...)
$children: []
$createElement: ƒ (a, b, c, d)
$el: div#app.demoDiv
$listeners: (...)
$options: {components: {…}, directives: {…}, filters: {…}, _base: ƒ, el: "#app", …}
$parent: undefined
$refs: {}
$root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$scopedSlots: {}
$slots: {}
$vnode: undefined
fruits: (...)
veggies: (...)

As you can see, the Vue object is laid out in all its glory. That includes things like variables and functions/ methods.

So, if you wanted to access a Vue variable or method from Javascript in the page, you would use something like:

console.log(vue_choices.fruits)

Which gives you access to the fruits list:

4) ["apples", "pears", "peaches", "cherries", __ob__: Observer]
0: "apples"
1: "pears"
2: "peaches"
3: "cherries"

That means you an reach into Vue and work with any variables or methods.
Now you are drunk with power! Muhahah!

Ok, back to work.

In our example, we want to tell Vue when 'vegetable' or 'fruit' has been chosen. Since we're asking Vue to do the work, it makes sense to write a function/method in Vue. That function can be called from the DOM JavaScript level.

Because the function can take a parameter, it's a way of passing data from the DOM level into Vue.

Let's see this in action.

Create a method in Vue called showChoice(). The method takes a parameter with the choice, and will display a list based on the choice.
Note: The whole show/hide thing uses flag variables, so we'll add them.

The Vue code looks something like:

var vue_choices = new Vue({
    el: '#app', //Attach to element id app
    data: {
        fruits: ["apples", "pears", "peaches", "cherries"],
        veggies: ["lettuce", "peas", "carrots", "tomatoes"],

        //Display
        show_fruits: false,
        show_veggies: false,
    },

    methods: {
        showChoices: function (getChoice) {
            //Set display vars according to choice
            switch (getChoice) {
                case 'fruit':
                    this.show_fruits = true;
                    this.show_veggies = false;
                    break;
                case 'veggies':
                    this.show_fruits = false;
                    this.show_veggies = true;
                    break;
                default:
                    this.show_fruits = false;
                    this.show_veggies = false;
            }
        }
    },   // end methods
})  // end vue

The Vue div uses v-show to handle show/hide and looks like:

<!-- Div where Vue runs -->
    <div id="app" class="demoDiv">
        <div v-show="show_fruits">
            <h3>Fruit choices:</h3>
            <ul id="fruit_list" style="list-style-type: none">
                <li v-for="fruit in fruits">
                    <input type="radio" name="food_selected" v-bind:value="fruit">{{ fruit }}
                </li>
            </ul>
        </div>

        <div v-show="show_veggies">
            <h3>Veggie choices:</h3>
            <ul id="fruit_list" style="list-style-type: none">
                <li v-for="veggie in veggies">
                    <input type="radio" name="food_selected" v-bind:value="veggie">{{ veggie }}
                </li>
            </ul>
        </div>
    </div>

Call the Vue Function from JavaScript

Now that the function showChoices() is part of the Vue object vue_choices, you can call it in JavaScript like this: vue_choices.showChoice( ) .

Of course we need to add the choice parameter, which we get in the JavaScript doFoodGroup() function.

The function should look like:

function doFoodGroup() {
//Returns what is selected
            var selected = $("input:radio[name ='food_group']:checked").val();
            alert("You selected: " + selected);

            //Send the selection to Vue
            vue_choices.showChoices(selected);
        }

Putting It Together

At this point the user selects a food type (fruit or veggie) and passes the choice to Vue via a Vue function called in JavaScript.

Your HTML code should look like:

<html lang="en">

<head>
    <!-- Load JQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_demo.js" defer></script>

    <script type="text/javascript">
        function doFoodGroup() {
            //Returns what is selected

            var selected = $("input:radio[name ='food_group']:checked").val();
            showSelection(selected);

            //Send selection to Vue
            vue_choices.showChoices(selected);
        }

        function showSelection(getSelection) {
            alert("You selected: " + getSelection);
        }
    </script>

    <style>
        .demoDiv {
            display: inline-block;
            width: 49%;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <h1>JQuery and Vue</h1>
    <div class="demoDiv">
        <h2>Select a Food Group:</h2>
        <input type="radio" name="food_group" value="fruit" onclick="doFoodGroup()" /> Fruit
        <br />
        <input type="radio" name="food_group" value="veggies" onclick="doFoodGroup()" /> Veggie
    </div>
    <!-- Div where Vue runs -->
    <div id="app" class="demoDiv">
        <div v-show="show_fruits">
            <h3>Fruit choices:</h3>
            <ul id="fruit_list" style="list-style-type: none">
                <li v-for="fruit in fruits">
                    <input type="radio" name="food_selected" v-bind:value="fruit" />{{ fruit }}
                </li>
            </ul>
        </div>

        <div v-show="show_veggies">
            <h3>Veggie choices:</h3>
            <ul id="fruit_list" style="list-style-type: none">
                <li v-for="veggie in veggies">
                    <input type="radio" name="food_selected" v-bind:value="veggie" />{{ veggie }}
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

Your Vue code should look like:

var vue_choices = new Vue({
    el: '#app', //Attach to element id app
    data: {
        fruits: ["apples", "pears", "peaches", "cherries"],
        veggies: ["lettuce", "peas", "carrots", "tomatoes"],

        //Display
        show_fruits: false,
        show_veggies: false,
    },

    methods: {
        showChoices: function (getChoice) {
            //Set display vars according to choice
            switch (getChoice) {
                case 'fruit':
                    this.show_fruits = true;
                    this.show_veggies = false;
                    break;
                case 'veggies':
                    this.show_fruits = false;
                    this.show_veggies = true;
                    break;
                default:
                    this.show_fruits = false;
                    this.show_veggies = false;
            }
        },

    },   // end methods
})  // end vue

Now we're getting some where!

Vue Data Vars vs Methods / Functions

Although you can change a Vue variable directly through JavaScript by using something like:

vue_choices.show_fruits = false

Using a method is probably a better idea. Remember: Change Lanes Politely.

Why? That variable may be manipulated within Vue and JavaScript making changes from the outside may cause problems. So change Vue data vars through a method (and save yourself a headache)!

Passing Data from Vue to Javascript

We just called a Vue method to pass a parameter to Vue from Javascript. If you want to go the other way and pass a parameter from Vue to JavaScript, it's the same idea only backwards. Yup, that means calling a JavaScript function inside Vue.

Note: Yes, you can access the JavaScript variable directly, but a function is less risky if something changes.

In this example, let's say whenever the user selects a specific fruit or veggies, we need to pass that choice back to the function showSelection() in the main document.

As you're pondering this problem, you're probably thinking using an onChange event to fire showSelection() is the solution.
No it's not.

Gotcha! Regular JavaScript events don't work well in Vue elements.

If you try to add a regular 'onchange' event to the element, Vue will ignore it. It uses v-on:click.
If you try to run something like: v-on:click=" showSelection()", that won't work either because showSelection() is not a Vue thing.

Remember, Vue's job is to handle its section of the DOM. If you change an element outside of Vue, it causes problems. Stay in your lane!

Solution: Access JavaScript objects (functions) inside Vue.

Although the Vue DOM doesn't like regular JavaScript (or jQuery) in it, Vue methods are cool using JavaScript objects.
Using jQuery inside your Vue file is possible, but probably not worth the fight. Stick with JavaScript if you can.

So, the approach is:

Create a Vue Method that fires the parent document showSelection()
In the Vue div, use v-onclick="vueMethod()" to run it.

Vue Method

The method is very simple, just run the function defined in the parent document. Make sure it takes a parameter that can be passed to showSelection().

That means it looks something like:

 getSelection: function(selection) {
                showSelection(selection)
            }

Wait! You can just use the JavaScript function defined in the document inside Vue?
Yup, that the whole point.

The function is a JavaScript object, Vue is JavaScript and has access to the objects. That's how it all works.

Your Vue code should look like:

var vue_choices = new Vue({
        el: '#app', //Attach to element id app
        data: {
            fruits: ["apples", "pears", "peaches", "cherries"],
            veggies: ["lettuce", "peas", "carrots", "tomatoes"],

            //Display
            show_fruits: false,
            show_veggies: false,
        },

        methods: {
            showChoices: function(getChoice) {
                //Set display vars according to choice
                switch (getChoice) {
                    case 'fruit':
                        this.show_fruits = true;
                        this.show_veggies = false;
                        break;
                    case 'veggies':
                        this.show_fruits = false;
                        this.show_veggies = true;
                        break;
                    default:
                        this.show_fruits = false;
                        this.show_veggies = false;
                }
            },

            getSelection: function(selection) {
                showSelection(selection)
            }

        }, // end methods
    }) // end vue

Update the Vue Div

We have the method, we want to fire it when a fruit or veggie is selected. So you would change your inputs to something like:

<input type="radio" name="food_selected" v-bind:value="fruit" v-on:click="getSelection(fruit)" />

Passing Parameters: Bind Values

You want to pass the value of the input to the method. The value is defined by v-bind:value="fruit", this is what is tied to that input.

Oh, don't forget to change the 'veggie' inputs one too!

Your html file should look like this:

<html lang="en">

<head>
    <!-- Load JQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_demo.js" defer></script>

    <script type="text/javascript">
        function doFoodGroup() {
            //Returns what is selected

            var selected = $("input:radio[name ='food_group']:checked").val();
            showSelection(selected);

            //Send selection to Vue
            vue_choices.showChoices(selected);
        }

        function showSelection(getSelection) {
            alert("You selected: " + getSelection);
        }
    </script>

    <style>
        .demoDiv {
            display: inline-block;
            width: 49%;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <h1>JQuery and Vue</h1>
    <div class="demoDiv">
        <h2>Select a Food Group:</h2>
        <input type="radio" name="food_group" value="fruit" onclick="doFoodGroup()" /> Fruit
        <br />
        <input type="radio" name="food_group" value="veggies" onclick="doFoodGroup()" /> Veggie
    </div>
    <!-- Div where Vue runs -->
    <div id="app" class="demoDiv">
        <div v-show="show_fruits">
            <h3>Fruit choices:</h3>
            <ul id="fruit_list" style="list-style-type: none">
                <li v-for="fruit in fruits">
                    <input type="radio" name="food_selected" v-bind:value="fruit" v-on:click="getSelection(fruit)" />{{ fruit }}
                </li>
            </ul>
        </div>

        <div v-show="show_veggies">
            <h3>Veggie choices:</h3>
            <ul id="fruit_list" style="list-style-type: none">
                <li v-for="veggie in veggies">
                    <input type="radio" name="food_selected" v-bind:value="veggie" v-on:click="getSelection(veggie)" />{{ veggie }}
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

Summary

Yes you can inject some Vue into a project built with regular JavaScript or jQuery. It's not all or nothing.

You can pass data between JavaScript and Vue because it you're dealing with JavaScript objects. JavaScript can look at Vue, Vue has access to functions written in the document.

The trick is to 'stay in your lane' -- work with whatever is controlling the element you're changing.

Keep jQuery outside of Vue, it's easier that way.

Files

You can find the files for this tutorial on GitHub:
https://github.com/workingwebsites/vue-jquery-javascript

Using Vue for APIs

Lisa Armstrong — Thu, 25 Jul 2019 03:36:29 +0000

At some level, most apps use data and it's probably coming from an API. In this tutorial, we'll use Vue to fetch the data and display it.

This example

Let's say you need to display a list of countries in North America. The list will show the country, the capital and its population.

You found the API with the data called REST Countries, it has country size and population -- just what you need.

Welcome to API, Can I Take Your Order?

When you think about it, APIs are kind of like drive-through restaurants, you make a request and get a response. However, you need to know a few things such as:

1. Where is the food / data located?

You need to the address of the restaurant like you need to know the URL for the API.

2. What's on the menu?

Do you ask for 'chips' or 'fries'?
Yeah, they're the same, but you need to use the right word / parameters to get what you want.

3. What do you get?

When you're handed your food / data in a package, you need to know what's in there. Is ketchup included or vinegar? Likewise, what fields and formats are returned?

4. Can you make special requests?

How do you get extra napkins / request certain fields?

Read the Menu

It's good to have an idea of what's involved with the API before beginning your project. Have a look at the menu / documentation, it'll make the job easier.

Accessing APIs In Vue

Vue is a javascript framework, so it doesn't have a specific method to use APIs. Ajax or Fetch are ok. Axios is often recommended because it's simple to use and works, so we'll use that.

Enough theory, let's get our hands on the keyboard and start coding!

The Basic Set-Up

To keep things simple, we'll build the app in a web page.

For that, we'll use two files,

HTML file to display the data and load the Vue file.
The Vue file has the code.

HTML File:

<html lang="en">

<head>
    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_lists.js" defer></script>

    <style>
        table,
        th,
        td {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <h1>North America</h1>
    <!-- Div where Vue runs -->
    <div id="app">
        <h2>Table</h2>
        <table>
            <tr>
                <th>Country</th>
                <th>Capital</th>
                <th>Population</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</body>

</html>

Vue.js File:

In this file we're using 'countries_list' as the array that will contain the data. It's empty for now.

var app = new Vue({
    el: '#app',
    data: {
        countries_list: [],
    },
})

Loading Axios

To use Axios in your application, you need to load it. We're keeping it simple, so we'll use the cdn, which we'll add to the HTML header.

<!-- Load Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Now that it's loaded, you can access it in Vue.

Get the Data

Back to the drive-through metaphor. We're in the car (Axios), ready to head out. We know the location (url), we read the menu (documentation) so we know what to ask for (url string).
Let's place an order!

Based on the documentation, the request string should look like: https://restcountries.eu/rest/v2/region/americas

Great! We know how to get the data, now lets get it on the screen. The data should display as soon as the page is loaded, so how do you do that?

Hang It On A Hook

Vue has a series of life cycle hooks that fire at certain stages during loading. The 'mounted' hook fires when the Dom is loaded. That works! We'll put the Axios call in there and set it up so we can have a look at the raw data in the console log.

mounted() {
        axios
            .get('https://restcountries.eu/rest/v2/region/americas')
            .then(response => (
                console.log(response)
                ))
    }

Breakdown:

mounted() { ...}	When the dom is loaded
axios	Tell Axios to...
.get (....)	...use 'get' to go to this url and return the data
.then (...)	Once the data is returned...
response => ( console.log(response) )	... call the data 'response' and show it in the console log.

Putting It Together

The code should look something like this:

HTML

<html lang="en">

<head>
    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Load Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_lists.js" defer></script>

    <style>
        table,
        th,
        td {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <h1>North America</h1>
    <!-- Div where Vue runs -->
    <div id="app">
        <h2>Table</h2>
        <table>
            <tr>
                <th>Country</th>
                <th>Capital</th>
                <th>Population</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</body>

</html>

Vue.js File:

var app = new Vue({
    el: '#app',
    data: {
        countries_list: [],
    },

    mounted() {
        axios
            .get('https://restcountries.eu/rest/v2/region/americas')
            .then(response => (
                console.log(response)
                ))
    }

})

The data in the console log looks like this:

{data: Array(57), status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: (57) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
headers: {content-type: "application/json;charset=utf-8", cache-control: "public, max-age=86400"}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
__proto__: Object

It has everything we need, plus a whole lot more!

Pulling Out What You Need

Like a drive-through, you need to unpack the package to get to the food / data.

What we're seeing here is the full response, the status, the headers, the whole package. It's like being handed the bag at the drive-through window, we don't need the wrappers, just the food (data), so we need to unpack it a bit. You can do that by tweaking the code to return the response.data

.then(response => (
                console.log(response.data)
                ))

Tip: Because response returns everything, it's a good debugging tool.

The console log should look something like:

(57) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Anguilla", topLevelDomain: Array(1), alpha2Code: "AI", alpha3Code: "AIA", callingCodes: Array(1), …}
1: {name: "Antigua and Barbuda", topLevelDomain: Array(1), alpha2Code: "AG", alpha3Code: "ATG", callingCodes: Array(1), …}
2: {name: "Argentina", topLevelDomain: Array(1), alpha2Code: "AR", alpha3Code: "ARG", callingCodes: Array(1), …}

That's better!

Making the Data Workable

The next step is to assign the data to a variable we can use to in the HTML file.

.then(response => (
                this.countries_list = response.data
                ))

Now countries_list has the data, we'll set up the HTML page to display it.

Displaying Data

We already have the table set up in the HTML file, we just need to get the data in there.

Right now, data is in an array called 'countries_list'. The trick here is to loop through it and display it in the table. This is done by using 'v-for', it's a kind of 'for loop' for Vue. You put inside an element that you want repeated for every record in the database.

Our example looks like:

<tr v-for="country in countries_list">
    <td>{{country.name}}</td>
    <td>{{country.capital}}</td>
    <td>{{country.population}}</td>
</tr>

Breakdown:

<tr v-for="country in countries_list">	Create a <tr> for every record in 'coutry_list', each record will be called 'country'
<td>{{country.name}}</td> <td>{{country.capital}}</td> <td>{{country.population}}</td>	To display data in Vue, you use the double curly brackets. So, for each record, create the <td> and wrap the data (called 'country') and the field (name, capital population etc.) in the curly brackets
</tr>	End of the row.

The HTML page should look like:

<html lang="en">

<head>
    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Load Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_lists.js" defer></script>

    <style>
        table,
        th,
        td {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <h1>North America</h1>
    <!-- Div where Vue runs -->
    <div id="app">
        <h2>Table</h2>
        <table>
            <tr>
                <th>Country</th>
                <th>Capital</th>
                <th>Population</th>
            </tr>
            <tr v-for="country in countries_list">
                <td>{{country.name}}</td>
                <td>{{country.capital}}</td>
                <td>{{country.population}}</td>
            </tr>
        </table>
    </div>
</body>

</html>

The table should look like:

Country	Capital	Population
Anguilla	The Valley	13452
Antigua and Barbuda	Saint John's	86295
Argentina	Buenos Aires	43590400
Aruba	Oranjestad	107394
Bahamas	Nassau	378040
Barbados	Bridgetown	285000

We're getting somewhere!

Using API's in an Element
(or How to Use Vue in <img and Other Tags)

This API has a flag image for each country. That's a nice visual cue, so let's add that beside the country.

Although you use the double curly brackets for displaying API data in Vue, when you're applying it to an HTML element like an image tag, it works differently.

Here you use v-bind to tie data to an attribute. So the image tag would look something like:

<img v-bind:src="country.flag" alt="Flag" height="26" width="42">

Let's add it to the table.

<tr v-for="country in countries_list">
  <td>
     <img v-bind:src="country.flag" alt="Flag" height="26" width="42"> 
      {{country.name}}
   </td>
   <td>{{country.capital}}</td>
   <td>{{country.population}}</td>
 </tr>

Passing Parameters

With this API, you can pass a parameter to it telling it what fields to return. We only need

Country
Short form
Size
Population
Flag

Based on the documentation, the URL should look like:
https://restcountries.eu/rest/v2/region/americas?fields=name;capital;flag;population

We can change the Axios call to:

mounted() {
        axios
            .get('https://restcountries.eu/rest/v2/region/americas?fields=name;capital;flag;population')
            .then(response => (
                this.countries_list = response.data,
                console.log(response.data)
                ))
    }

Nothing has changed in the results but if you look in the console, you'll only see the data you need. Easy, huh?

[{"flag":"https://restcountries.eu/data/aia.svg","name":"Anguilla","capital":"The Valley","population":13452},{"flag":"https://restcountries.eu/data/atg.svg","name":"Antigua and Barbuda","capital":"Saint John's","population":86295},{"flag":"https://restcountries.eu/data/arg.svg","name":"Argentina","capital":"Buenos Aires","population":43590400},{"flag":"https://restcountries.eu/data/abw.svg","name":"Aruba","capital":"Oranjestad","population":107394},
.....

When passing the parameters in this case, it was simple -- a 'get' string. Of course some API's and apps are more complex and may require 'post' variables etc. Axios does a nice job of passing variables among many other things. For more info see: https://github.com/axios/axios

Handling Errors & Missing Data

What happened if there's a problem? Data is not returned, the restaurant is closed, then what?

You use catch. Catch will, well, catches the error so you handle it gracefully.

.catch(error =>(
                console.log(error)
                ));

As a rule you let the user know that there was a problem. Although you could set up some code within catch error, it's probably easier to set up an v-if statement in the HTML file.

In this case, if the 'countries_list' is empty, then let the user know. This can be done in the HTML page by adding another row that will display if the countries_list.length is 0.

<tr v-if="countries_list.length == 0">
    <td colspan="3">
        No records found.
    </td>
</tr>

Breakdown:

<tr v-if="countries_list.length == 0">	Create a <tr> if the length of the array countries_list is zero
<td colspan="3"> No records found. </td>	Only 1 td is need to expand all three columns that should be there. We still have 3 heading columns.
</tr>	End of the row.

Important! Make sure your 'error row' is outside of the rows generated if there is a list. They are 2 different things!

Your table should look something like:

<table>
    <!-- Header -->
    <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>Population</th>
    </tr>
    <!-- Country List -->
    <tr v-for="country in countries_list">
        <td>
            <img v-bind:src="country.flag" alt="Flag" height="26" width="42">
            {{country.name}}
        </td>
        <td>{{country.capital}}</td>
        <td>{{country.population}}</td>
    </tr>
    <!-- Error Row -->
    <tr v-if="countries_list.length == 0">
        <td colspan="3">
            No records found.
        </td>
    </tr>
</table>

Final Product

Our HTML code should look like:

<html lang="en">

<head>
    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Load Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_lists.js" defer></script>

    <style>
        table,
        th,
        td {
            border: 1px solid #cccccc;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <h1>North America</h1>
    <!-- Div where Vue runs -->
    <div id="app">
        <h2>Table</h2> 
        <table>
            <!-- Header -->
            <tr>
                <th>Country</th>
                <th>Capital</th>
                <th>Population</th>
            </tr>
            <!-- Country List -->
            <tr v-for="country in countries_list">
                <td>
                    <img v-bind:src="country.flag" alt="Flag" height="26" width="42">
                    {{country.name}}
                </td>
                <td>{{country.capital}}</td>
                <td>{{country.population}}</td>
            </tr>
            <!-- Error Row -->
            <tr v-if="countries_list.length == 0">
                <td colspan="3">
                    No records found.
                </td>
            </tr>
        </table>
    </div>
</body>

</html>

Our Vue script should look like:

var app = new Vue({
    el: '#app',
    data: {
        countries_list: [],
    },

    mounted() {
        axios
            .get('https://restcountries.eu/rest/v2/region/americas?fields=name;capital;flag;population')
            .then(response => (
                this.countries_list = response.data
                ))
            .catch(error =>(
                console.log(error)
                ));
    }

})

And our list should look something like:

Country	Capital	Population
Anguilla	The Valley	13452
Antigua and Barbuda	Saint John's	86295
Argentina	Buenos Aires	43590400
Aruba	Oranjestad	107394
Bahamas	Nassau	378040
Barbados	Bridgetown	285000
Belize	Belmopan	370300
Bermuda	Hamilton	61954

To Sum Up

Using API's in Vue is fairly straight forward. Make sure you know how to get your data (the drive-through), assign it to an array variable and display it in HTML.

Resources

For more information:

Using Vue to Display Lists

Lisa Armstrong — Fri, 03 May 2019 17:43:55 +0000

If you're building a web app at some point there will be a list of data you need on the screen. The data might be in a table, a bullet list or options to choose from on a form. With Vue, displaying that data is not a big trick.
Let's see how it's done!

The List Data

Say you have a simple list of countries and their short codes to render in various parts your app. This list will probably change, so you want it generated in one Vue file.

Setting It Up

To use Vue in your application, you need 3 things:

Vue loaded
An element to contain the code
The code to display content.

For this tutorial, we'll use a simple HTML file to run the app.

The HTML File

Your HTML page should look like:

<html lang="en">
<head>
    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_lists.js" defer></script>
</head>

<body>
    <h1>List</h1>
    <div id="app">
       <!-- Div where Vue runs -->
    </div>
</body>
</html>

Notice your app file has 'defer' in the script tag. Defer means the script will load after the document has loaded. That makes sure the container element for the app is loaded before the app code loads.

The App File

Now the app file (aka vue_lists.js):

var app = new Vue({
    el: '#app',
    data: {
        countries_list: [
            { "name": "Canada", "code": "CAN" },
            { "name": "Mexico", "code": "MEX" },
            { "name": "United States of America", "code": "USA" }
        ],
    }
})

Breaking It Down:

The important thing here is:

data: {
countries_list: [
....
]}

This means the data for this app has an array of objects called 'countries_list'. All we have to do is display the array of objects in the HTML file.

Displaying Data in HTML

Normally in Vue, you display data in HTML by putting it inside curly brackets {{ data_object }}. Since this is an array of objects, that's not going to work. You need to iterate through the array to access each item. The v-for directive does exactly that.

<ul id="country_list">
    <li v-for="country in countries_list">
        {{ country.name }} ({{ country.code }})
     </li>
</ul>

Breaking It Down

The "v-for" is similar to "for each". It goes through the array, one item at a time, and creates another element. In this case another <li>.

The "country in countries_list" means "for each item in the array countries_list, the current one will be called country".
The results are exactly what we want.

Canada (CAN)
Mexico (MEX)
United States of America (USA)

Putting it all together:

<html lang="en">
<head>
    <!-- Load Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Load script file.  'defer' loads after body is generated -->
    <script src="vue_lists.js" defer></script>
</head>

<body>
    <h1>List</h1>
    <div id="app">
       <ul id="country_list">
          <li v-for="country in countries_list">
            {{ country.name }} ({{ country.code }})
         </li>
       </ul>
    </div>
</body>
</html>

Table

Of course creating a table of data works the same way.

<table>
    <tr>
        <th>Country</th>
        <th>Short Code</th>
    </tr>
    <tr v-for="country in countries_list">
        <td>{{ country.name }}</td>
        <td>{{ country.code }}</td>
    </tr>
</table>

Select Elements

And it's the same idea for populating a select elements.

<select name="country_code">
    <option v-for="country in countries_list" v-bind:value="country.code">
        {{ country.name }}
    </option>
</select>

Wait a minute! What's with this "bind" thing?

"v-bind:value="country.code"

In Vue, curly brackets don't work for setting attributes in a tag. Instead, you use v-bind to tie data to an attribute.

The thing to know is, you can bind a single value (country.code), or the entire object (country). Very helpful when you need the whole data object to work with!

Conclusion

As your can see, displaying an array of data is really just using the v-for directive. Having it in HTML gives you all the flexibility you need to display and format the data. Yeah, it's that simple.

Also, because it's in Vue, it's easy to drop into any web project, even WordPress.

Download code: Github

Using Git to FTP Your Project

Lisa Armstrong — Mon, 22 Apr 2019 19:39:31 +0000

Git has become a version control standard and for good reason. Its ability to branch projects, track and roll back changes makes development MUCH easier!

The Gap Between Git and FTP

When developing at some point you upload your work to a server. FTP usually does the trick and there's a couple of ways to deploy your work:

A) Upload ALL the files.
Sure, everything gets uploaded, but it can be time consuming and sometimes files get overwritten that shouldn't.

B) Only upload changed files.
That makes more sense except keeping track of which files have been changed can be messy.

Git knows which files have changed and you've been working with it the whole time, can't we just use Git to FTP?

No, it doesn't work that way. Git is a version tracker not a file manager. You could install Git on the live server, but sometimes that's not practical. With Git, FTP is out of reach.

Git-ftp: Bridging the Gap

This is where Git-ftp comes in. It's a plug-in that adds a set of commands to Git allowing you to upload your changed files via FTP.

As its website says:

If you use Git and you need to upload your files to an FTP server, Git-ftp can save you some time and bandwidth by uploading only those files that changed since the last upload.

It keeps track of the uploaded files by storing the commit id in a log file on the server. It uses Git to determine which local files have changed.

You can easily deploy another branch or go back in the Git history to upload an older version.

Well, that covers it, now doesn't it?

The git-ftp website: https://git-ftp.github.io/

Note: Git-ftp Is Not A Repo On Your Server

Git-ftp doesn't make your server a proper repository! Git is not installed on your server, git-ftp simply tracks changed files and uploads them. You can upload different branches (which is great!), but you can't pull changed files from your server.
Honestly, I've never found these restriction to be a problem.

Think of git-ftp as a way to manage ftp uploads not version control.

How to Use git-ftp in Your Work Flow

I've been using git-ftp for a while, and found it smooths out the work flow. For example, let's say I'm adding a new code called FeatureA to an existing project.

The process:

Create a new branch called 'FeatureA' in development
There's no need to pull from the server since it's not a repository. The official repository is in development.
Build and test in development.
The code works like a charm!
Deploy to the live server.
A simple command: git ftp push will send the new branch files to the server.
Test on the live server
Uh-oh! Doesn't work as expected, un-do this quick!
1. Reinstate the 'master' branch
  Push the branch 'master' to the live server. Branch 'FeatureA' is gone. Back to the drawing board.
2. Fix the problem, try again.
  Push branch 'FeatureA' to live server and test.
  It works! Happy Dance!
Merge with 'master'
I have a personal rule that the live server only uses the 'master' branch.
I found if I had another branch live, it was too easy to lose track of which branch was being used. So, now I'll upload another branch for testing only, but once it checks out, it gets merged into 'master' and 'master' get pushed to the live server.
If there is a problem I can still roll 'master' back to before the last merge.
Client review and approval
I keep branch 'FeatureA' on hand until the client has signed-off on it.
Even after it's approved, I'll re-name the branch to something like 'FeatureA_done'. That keeps the branch around in case I have to go back to it, but the '_done' tells me it is disposable. I usually get rid of it when I'm sure the change is good.

Although this process may not be ideal for all cases, I have used it for a while and it works for me. I can use Git functionality and deploy through FTP with minimal friction. The other thing I like, is it's a sure thing. If you're working with a new server, as long as you can FTP, it should work. You don't have to spend time configuring the server to run Git etc. Just focus on your code!

Why Projects Should Have Mission Statements

Lisa Armstrong — Tue, 09 Apr 2019 03:28:01 +0000

When starting a project you need to know what you're building and why. The 'what' is pretty obvious, the stakeholder usually tells you they want X and need you to create it. But before I put my hands on the keyboard, I want to know 'why' and for 'who'.

'Why' and 'who' are important guide posts in a project. They'll point you in the right direction for things like user experience, functionality, platforms as well as keep you focused on what's important. This helps meet expectations, keeps everyone happy and that makes life better!

The 'what', 'who' and 'why' can be distilled out in a mission statement.

Mission Statements Are Not That Hard

The process doesn't have to be too involved. No angst filled existential endless meetings are required. In fact, you probably have a good idea of what your mission statement will be from a conversation with stakeholders. It may have gone like this:
"We need a way to manage engineer drawings. They spend too much time looking them up."

All the elements are there:

What: a system to manage drawings faster and easier than before
For Who: engineers
Why: finding drawings is slow

So, the mission statement would be something like:

The purpose of this project is to make drawings quicker and easier to find for the engineering team.

Sure, that's obvious now, but when you get into the fog of development, it's easy for developers and stakeholders to lose sight of the project goal. New features are suggested, scope creep begins, deadlines get strained and ... well, you know how it goes. In the end, nobody is happy.

By filtering every feature, idea, suggestion through the mission statement, it keeps things on track.

If it doesn't satisfy the mission statement, don't do it!

That doesn't mean don't do it ever, just don't do it now, during this project. Make a note of it and review it once the project is over. As I say to clients "That's a great idea! Let's put it on the wish list and we'll come back to it."

Focus the Stakeholders

Sometimes stake holders aren't perfectly clear about what they're looking for. They know what they want, they agree it's a good idea, but maybe the 'why' and 'who' needs some fleshing out.

It's helpful to walk them through the mission statement process. Ok, there might be a little angst, but it's better now than at the end of the project when you hear the dreaded "That's not what we wanted. "

Mission Statement Template

So, the whole mission statement can really be boiled down to:

The purpose of this project is to ___[do what]___ for ___[who]___ so that ___[why]___.

Now That You Have Your Mission Statement...

Once you get the 'what', 'who' and 'why' sorted out, other thing fall into place. 'How' will be dictated by the mission statement, specifics like functionality, deliverables etc. become more obvious. In short, you know where you're going, you just need to figure out how to get there.

Development Team

Developers make decisions all day about how a program is going to work. By keeping the mission statement top of mind, it makes decisions a little easier. It's a bit like a mantra -- although chanting it while coding is not required!

Stakeholders

The reward for stakeholders is they know what they're getting and have a yard stick to measure it. If the end product satisfies the mission statement, it's a success. If not, back to the chanting developers.

Seriously, it helps set and meet expectations -- always a good thing!

Summary

I know there's a lot of different techniques for getting project requirements out there. A mission statement certainly isn't the only one and definitely not the best for all cases. However, I've found it's simple and useful in clarifying what you're building, why you're building it and who is going to use it.

Using Vue in WordPress

Lisa Armstrong — Wed, 03 Apr 2019 17:02:32 +0000

Like peanut butter and jam sometimes two good things are even better together.

In this tutorial I'll show you how to use Vue in a WordPress site. The tutorial is meant for those who have coded in WordPress and Vue or is interested in either one. Knowledge in PHP, WordPress, Javascript, Vue will help.

Vue Programmers: Why WordPress?

Statistically, WordPress runs about a third of the world's websites. If you've created something in Vue you'd like to share, WordPress is a good platform to make it available on.

You can customize your own site, or share your code on WordPress' plugin repository.

WordPress Programmers: Why Vue?

The short answer is, Vue is known for its simplicity and robustness making it a solid choice for development. If you're adding functionality to your site, it makes a good tool to get up and running with. It's in JavaScript, so it's familiar to most developers.

WordPress uses React, can I even use Vue?
Of course! Although some features in WordPress may be in React, you are not limited to it.

WordPress is open source, do what makes you happy.

Tutorial Overview

We'll make a short code that displays something generated in Vue. We'll be using a simple example because this is more about how to put Vue and WordPress together rather than what they do.

The approach is:

Create a plugin in WordPress to use the code
Create a shortcode in the plugin
Create your Vue code
Load Vue, then your code file.
Make sure your .js file is loaded after the dom is drawn.

That's basically it. Let's get into the details.

WordPress: The Plugin.

Plugins are both simple and robust, they allow you to add functionality to your site. This plugin will be a simple 'hello world' type. We'll call it 'wp-vue-tutorial', so let's begin:

1) Create a new folder in your WordPress plugin directory.

This is where the files will be kept, it should be the name of the plugin. For this tutorial let's use:
/wp-content/plugins/wp-vue-tutorial

We need a 'master file', so let's make that.

2) In the directory, create a master file with the plugin name.

This file called 'wp-vue-tutorial.php' so it should look like:
/wp-content/plugins/wp-vue-tutorial/wp-vue-tutorial.php

Yes, the plugin name, folder name and master file name are all the same so WordPress knows where to find it.

Once WordPress opens it up, it needs some more info on what this thing is. That's included in the Header. We're keeping it simple, so in wp-vue-tutorial.php, add the following code:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */
?>

More info: https://developer.wordpress.org/plugins/

If you go to your WordPress Dashboard, you'll see your plugin.
Dashboard -> Plugins
It should appear in the list.

3) Activate your plugin.

Click Activate on your plugin.

Now it's loaded, but not much happens because there's no code to run. So, let's create a shortcode.

A shortcode tells WordPress to insert the content generated by your PHP code into the content of the page or post.
Ex. The user enters something like [myshortcode] and when the page is displayed, it shows 'This is content from my shortcode.'

Note: WordPress' current text editor (Gutenberg) allows you to put in blocks of content in. A shortcode will still work with that, in fact there is a block specifically for short codes. We're using shortcodes in this tutorial because it's a standard that works.

For more info: https://codex.wordpress.org/Shortcode_API

4) Create a shortcode in your Plugin.

Add the following code to your plugin file (wp-vue-tutorial.php):

 //Add shortscode
 function func_wp_vue(){
   return "Hello Shortcode";
}
add_shortcode( 'wpvue', 'func_wp_vue' );

Breaking it down:
The function func_wp_vue() returns the text Hello Shortcode.

add_shortcode(	Make this shortcode available.
'wpvue',	The code the user uses in the content [ 'wpvue'].
'func_wp_vue'	The function returning the string to display.
);	End of shortcode.

Your file should look like:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Add shortscode
 function func_wp_vue(){
 return "Hello Shortcode";
}
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

Test it.
Edit, or add a new WordPress page. In the content area, type in [wpvue].
Publish the page and have a look at it. You should see Hello Shortcode.

The short code can return more than a word, we can put in an element in the too.

Let's change the code to:

//Add shortscode
function func_wp_vue(){
  $str= "<div id='divWpVue'>"
    ."Message from Vue: "
    ."</div>";
  return $str;
} // end function

Test it again.

Set Up Vue

To use Vue, you need three things:

Vue js files need to be loaded on the page so you can use the framework.
You need an element on your page Vue can work in. Usually a div.
You need your Vue code in a .js file to do its work in the element.

Load Vue.js

Let's start with adding Vue. You can add Vue through a link to a CDN. There's 2 versions, one for development with debugging options and one for production that is faster and leaner.
We'll use the development one: https://cdn.jsdelivr.net/npm/vue/dist/vue.js

We need to load this into WordPress, which can be done through the magic of 'wp enqueue scripts' and 'wp_register_script'.
This hook automatically load the script into WordPress' head when needed.

It looks like:

function func_load_vuescripts() {
 wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

Break down:

function func_load_vuescripts() {	Define the function .
wp_register_script(	Tell WP this script exists (we'll load it later) .
'wpvue_vuejs',	This is the WordPress reference to the script.
''https://cdn.jsdelivr.net/npm/vue/dist/vue.js'',	Actual script file.
);	Close the wp_register_script.
}	Close the function.
add_action(	WordPress, do this.
'wp_enqueue_scripts',	Hook into 'wp_enqueue_scripts'.
'func_load_vuescripts'	Do this function for 'wp_enqueue_scripts' .
);	End action .

For more info:

Register Scripts: https://developer.wordpress.org/reference/functions/wp_register_script/
Enque Scripts: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

We'll add the code to your plugin file, above the shortcode.
It should look like this:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Register Scripts to use 
function func_load_vuescripts() {
 wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

//Add shortscode
function func_wp_vue(){
  //Build String
  $str= "<div id='divWpVue'>"
  ."Vue code here: "
  ."</div>";

  //Return
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

Right now, we told WordPress about Vue.js, but we haven't loaded it. You load it in the shortcode function so it fires when the shortcode is running. Makes sense?

Include the following in your shortcode function:

//Add Vue.js
  wp_enqueue_script('wpvue_vuejs');

Breakdown:

wp_enqueue_script(	WordPress, load this script
'wpvue_vuejs'	It's called 'wpvue_vuejs' defined when we registered the script.
);	End enqueue script

It should look like:

function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  
  //Build String
  $str= "<div id='divWpVue'>"
  ."Vue code here: "
  ."</div>";

  //Return
  return $str;
} // end function

Now if you run it, not much has changed, but if you were to look in the source code of the page you'd find :

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js?ver=5.1.1'></script>

Vue is now loaded, we can use the div generated in the shortcode ('divWpVue'), all we need is some Vue code to run in that div.

Create Your Code File for Vue

Make a new file: vuecode.js your plugin directory:
wp-content/plugins/wp-vue-tutorial

You should have 2 files in there:

wp-vue-tutorial.php
vuecode.js

More Info:
https://vuejs.org/v2/guide/

This is a really simple demo, so include the following code:

var app = new Vue({
  el: '#divWpVue',
  data: {
    message: 'Hello Vue!'
  }
})

Breakdown:

var app = new Vue({	We're creating a var called 'app' that is actually a Vue instance.
el: '#divWpVue',	This app runs in the element 'divWpVue'.
data: {	This app has data with it.
message: 'Hello Vue!'	One piece of data is called 'message' and has the value 'Hello Vue!'
} })	Close the data section Close the app section

For more info on Vue:

In order to display the message, you need to include the data message in the div. Change your shortcode function (func_wp_vue) to include {{message}}.

The double curly brackets is a way of including Vue stuff in your HTML file. If you add {{message}} inside the element you've assigned to your Vue instance, it will magically appear. This is the short non-technical answer of course.

Important! If you check your file, and everything is working, you will see 'Hello Vue!' where {{message}} was placed. If you see {{message}}, something's not working.

Let's add the {{message}} to the shortcode.

function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  
  //Build String
  $str= "<div id='divWpVue'>"
  ."Message from Vue: {{ message }}"
  ."</div>";

  //Return
  return $str;
} // end function

If you test it now, it won't work, {{message}} will display, not 'Hello Vue!'

Why? Because we haven't loaded your vuecode.js file yet. We can load it the same was as the Vue CDN file, right?

Hmm... not exactly. You're on the right track, but there's a couple of Gotcha's to watch out for. Let's walk through it.

To register vuecode.js, you would expect something like the following would work:

 wp_register_script('my_vuecode', 'vuecode.js')

No, it won't because WordPress can't find vuecode.js.

Gotcha: Your file isn't loading

Remember the shortcode is displayed on a page with a different path than the plugin. It's a kind of logistical hall of mirrors, nothing is where it appears.

To fix it, you need to be more precise about where the file is located. That's handled by adding a WordPress function that returns the path of the plugin file you're using. plugin_dir_url will do the trick.

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js')

More info on plugin urls: https://codex.wordpress.org/Function_Reference/plugins_url

Gotcha: Vue.js needs to load first

Your vuecode.js runs on Vue, so make sure those files are loaded before you start running your Vue code.

To ensure that, tell WordPress it depends on Vuejs by adding the dependency to the register_script function. Use the handle from the Vue.js script register.

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs' );

GOTCHA: Your file with Vue code has to come AFTER the DOM loads

Why? It loads scripts in the head, but your vuecode.js controlling a div in the body and it hasn't been loaded yet. It can't find it and throws an error.

So, load Vue.js first, then the body with the DOM, then the controlling script ( vuecode.js ). You can do that through the register script by adding a 'true' value to the parameters. 'true' tells WordPress to load the script in the footer.

It should look like this:

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );

Breaking it down:

wp_register_script(	WordPress, register this script.
'my_vuecode',	Its handle (reference) .
plugin_dir_url( __FILE __).'vuecode.js',	The file is located in the same directory as this plugin. This is the link to it.
'wpvue_vuejs',	Make sure this is loaded first. It's a reference to another registered* script.*
true	Load the script in the footer.
);	Close the function.

Your function to load the scripts should look like:

//Register scripts to use
function func_load_vuescripts() {
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

More Info on Registering Scripts:

Register Script: https://developer.wordpress.org/reference/functions/wp_register_script/
Plugin URL: https://codex.wordpress.org/Function_Reference/plugin_dir_url

That should do it. But, you still won't see anything, why not?
After all that, you've only registered the script. WordPress knows all about it, but you haven't told it to fire it.

Gotcha: Don't forget to enqueue /load the script

Ok, this one is just like enqueing the Vue.js script. Add the following to the shortcode function -- 'func_wp_vue'.

wp_enqueue_script('my_vuecode');

'func_wp_vue ' should look like:

//Return string for shortcode
function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  //Add my code to it
  wp_enqueue_script('my_vuecode');

  //Build String
  $str= "<div id='divWpVue'>"
    ."Message from Vue: {{ message }}"
    ."</div>";

  //Return to display
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );

Putting It All Together:

You should have your plugin called 'wp-vue-tutorial'. In the plugin directory, there should be 2 files:

vuecode.js (that has the Vue code in it)
wp-vue-tutorial.php (with the WordPress code)

vuecode.js

Your Javascript file that runs off of Vue.js should look like the following:

var app = new Vue({
  el: '#divWpVue',
  data: {
    message: 'Hello Vue!'
  }
})

wp-vue-tutorial.php

Your WordPress file that defines the plugin and has the shortcode code in it should look like:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Register scripts to use
function func_load_vuescripts() {
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );
}
//Tell WordPress to register the scripts 
add_action('wp_enqueue_scripts', 'func_load_vuescripts');


//Return string for shortcode
function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  //Add my code to it
  wp_enqueue_script('my_vuecode');

  //Build String
  $str= "<div id='divWpVue'>"
    ."Message from Vue: {{ message }}"
    ."</div>";

  //Return to display
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

Note: You can include the shortcode in a theme's functions.php file, it will still work the same as long as the the theme is being used, or its functions.php file isn't over-written with an upgrade.
I prefer the plugin because it separates out the style from the content and usually my Vue code is about content anyway.

More Info:
https://codex.wordpress.org/Functions_File_Explained

If you use the theme functions file, you need to call the file path in relation to your theme, not the plugin.

More Info:
https://codex.wordpress.org/Function_Reference/get_template_directory

Download Files

You can download the files at:
https://github.com/workingwebsites/wp-vue-tutorial

Conclusion

Ok, so 'Hello Vue' doesn't exactly set the world on fire. However, once you've got that in there, you can see how you can add a lot of functionality to your WordPress site through Vue.

By using Vue in your WordPress site, accessing API's and making your site more interactive gets easier. Likewise, if you have some crafty code written with Vue, dropping it into a WordPress site (and there's lots of them) is not a big trick.

Like peanut butter and jam, combining two good things make it better!

VueJS: The Golidilocks of JS Frameworks?

Lisa Armstrong — Sun, 17 Mar 2019 19:41:12 +0000

There's a number of Javascript frameworks out there and like many developers I recently had to figure out which one worked best for me and my client's needs.

Frameworks, NPM, MVS, Typescript, ES6, JQuery is so passe! A lot has changed over the last couple of years and that's a good thing. But, which tool to use?

Most of my work is web applications, CRUD projects using look ups, responding to input and showing data in tables that can be searched and exported. I use LAMP on the server and the standard HTML, CSS and JavaScript for front end.

My plan was to use the framework on a project, learning curves are ok, but delivering results is vital!

So, I entered the Javascript house of the 3 frameworks and had a look around.

REACT

At first I looked at React. It seems all the cool kids where using it, so there must be something to it. At the very least it's a good skill set to have.

However, there is a real learning curve with React. It also seems very component focused where HTML, CSS and code is stored in the same file.

I know, I know, that's the point of it. I also know that sooner or later there will be changes and it's much easier to send a designer into an HTML file than a JavaScript code block.

Sorry React, too hot.

ANGULAR

I had used AngularJS in another project and liked it. It was as advertised, an improved JavaScript. You could plunk it into any HTML file and go. Through the magic of data binding and vanilla JavaScript, I could make that DOM sing!

Alas, AngularJS's days are numbered. No more new releases, support ends in 2021. The message is clear, this is a dead-end for future development.

Angular 2 is an option, more robust than JS. I tried it, but it felt a lot like React with its complexity. I know they're not the same, this is a generalization, but it was still a major shift in a direction I didn't want to go.

Angular was too cold.

VUE

Vue was the new kid on the block and was inspired by AngularJS -- ok, that got my attention! So, I got out my coding spoon and had a taste.

What I like about Vue is it's easy to use for small things. Populating a drop-down box with a data feed? No problem. Need a data table? Piece of cake. Adding search capabilities to that table? Filters are your friends. All of the rendered code is easily readable in good old fashioned HTML. The JavaScript is tucked away in another file and not difficult to follow.

I found my work with AngularJS helped a lot with learning Vue, since many concepts are the same. I also found Vue isn't as component oriented as React and Angular. That made working in Vue more of a step up from JavaScript or jQuery. By taking a step -- not a leap -- I was able to get my hands around it quickly and really make it work!

Vue does use components which is great for the DRY (Do not Repeat Yourself) principle. It makes sense to build one component for code used in multiple screens. When writing HTML for your Vue component, you can keep it in the script file, or you can separate it out into another file. It's your choice -- and I like that.

Because Vue is small and easy to insert anywhere, it's a good choice for upgrading existing projects gradually. For example, an older app using jQuery can handle Vue coding. It's easy to insert it, you don't have to refactor everything, but you will see improvements because of Vue's data binding etc. That's an easy sell to a client as opposed to a full re-write.

So, Vue is great now, but will it be here in 5 years or in the digital dustbin with AngularJS? There's no way of knowing for sure. Right now, it's growing in popularity but things change. However, because most of the code is in JavaScript (in theory), you should be able to move your Vue algorithms to another platform if needed.

To Sum Up

Vue's learning curve is fairly flat.
If you're comfortable with JavaScript, it's the next step up. It also has good documentation and support.
Vue is flexible.
Whether you're adding a little functionality or creating a large project, Vue is designed to handle it.
Vue has a future, and if it doesn't, you still have your code.

Vue is just right.

CONCLUSION

The opinions stated above are just that -- opinions -- based on my experience and point of view. I approached each framework with an open mind and still have that openness to them. Dogma be damned, I just want something I can use that will do the job. Right now, Vue 'sparks joy' for me. If you're looking for a framework, have a look at it and see what it does for you.

Nevertheless, Lisa Armstrong Coded

Lisa Armstrong — Wed, 13 Mar 2019 22:04:06 +0000

I continued to code in 2019 because I love this stuff. Last year I began 'getting smart' about JS6, GIT, AngularJS which lead me to VueJS which I used in a couple of project and have fully embraced. I'm at the point now where I can really enjoy what my new skills can do.

Forem: Lisa Armstrong

I've Been Working from Home for Years, Here's Some Tips

Know Yourself

Boundaries Are Important!

Routine is Good

Exercise Keeps You Sane

Communication is Oxygen

Keeping Momentum

Be in the Real World

Setting Up Your Office

It's a Process

Using Vue in jQuery and JavaScript Sites

It's All JavaScript Anyway

The Project

Adding Vue

Moving Between Vue and Javascript

1. Stay in Your Lane (When You Can)

2. Change Lanes Politely

How To Pass Values to Vue

Remember: Vue is a Javascript Object!

Call the Vue Function from JavaScript

Putting It Together

Vue Data Vars vs Methods / Functions

Passing Data from Vue to Javascript

Vue Method

Update the Vue Div

Passing Parameters: Bind Values

Summary

Files

Using Vue for APIs

This example

Welcome to API, Can I Take Your Order?

Accessing APIs In Vue

The Basic Set-Up

Loading Axios

Get the Data

Hang It On A Hook

Putting It Together

Pulling Out What You Need

Making the Data Workable

Displaying Data

Using API's in an Element (or How to Use Vue in <img and Other Tags)

Passing Parameters

Handling Errors & Missing Data

Final Product

To Sum Up

Resources

Using Vue to Display Lists

The List Data

Setting It Up

The HTML File

The App File

Breaking It Down:

Displaying Data in HTML

Breaking It Down

Table

Select Elements

Conclusion

Using Git to FTP Your Project

The Gap Between Git and FTP

Git-ftp: Bridging the Gap

Note: Git-ftp Is Not A Repo On Your Server

How to Use git-ftp in Your Work Flow

Why Projects Should Have Mission Statements

Mission Statements Are Not That Hard

Focus the Stakeholders

Mission Statement Template

Now That You Have Your Mission Statement...

Summary

Using Vue in WordPress

Vue Programmers: Why WordPress?

WordPress Programmers: Why Vue?

Tutorial Overview

WordPress: The Plugin.

1) Create a new folder in your WordPress plugin directory.

2) In the directory, create a master file with the plugin name.

3) Activate your plugin.

4) Create a shortcode in your Plugin.

Set Up Vue

Load Vue.js

Using API's in an Element
(or How to Use Vue in <img and Other Tags)