Categories
JavaScript Vue

How to Add a Checkbox to a Vuejs App

We can add a checkbox control to a Vuejs app by adding a regular HTML checkbox control.

Then we can add the v-model directive to it to bind the checked value to a model variable.

For instance, we can write the following:

App.vue

<template>
  <div id="app">
    <input type="checkbox" v-model="checkValue">checkbox
    <p>{{checkValue}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      checkValue: false
    };
  }
};
</script>

In the code above, we added a checkbox to the model with the v-model directive.

The directive binds the checked value to the checkValue property.

We also have the p element below it to display the value.

Then when we click it, we toggle the checkValue model’s value between true and false.

Categories
JavaScript Vue

Add a JSON Editor in a Vuejs App

The vue-json-ui-editor package provides an easy way to add a JSON editor into our Vue app.

We can install it by running:

npm install vue-json-ui-editor --save

Then in App.vue, we can use it as follows:

<template>
  <div id="app">
    <json-editor ref="JsonEditor" :schema="schema" v-model="model">
      <br>
      <button @click="submit">submit</button>
      <button @click="reset" type="button">Reset</button>
    </json-editor>
  </div>
</template>

<script>
import JsonEditor from "vue-json-ui-editor";
const SCHEMA = {
  type: "object",
  title: "JSON editor",
  properties: {
    name: {
      type: "string"
    },
    email: {
      type: "string"
    }
  }
};

export default {
  name: "App",
  components: { JsonEditor },
  data: () => ({
    schema: SCHEMA,
    model: {
      name: "foo"
    }
  }),

  methods: {
    submit(_e) {
      alert(JSON.stringify(this.model));
    },
    reset() {
      this.$refs.JsonEditor.reset();
    }
  }
};
</script>

We imported the JsonEditor component and specify a schema as a JavaScript object and set the schema as the value of the schema prop.

Also, we can set the title of the editor.

The schema will displayed as the controls on the screen.

Since we have 2 properties in the schema, we’ll see 2 controls displayed.

When we click Submit, we’ll see the JSON displayed.

Categories
JavaScript Vue

Create a Hello World App with Vuejs

There’re a few ways to create a hello world app with Vuejs.

With the Vue CLI, we can install it by running:

npm install -g @vue/cli

Then we run it as follows:

vue create my-project

Where my-project can be replaced with the project name of our choice.

We keep all the default choices when asked when we go through the wizard.

Then in App.vue, we write:

<template>
  <div id="app">hello world</div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can also write:

<template>
  <div id="app">{{msg}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "hello world"
    };
  }
};
</script>

We can also use the script tag version as follows:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      new Vue({ el: "#app", template: "<div>hello world</div>" });
    </script>
  </body>
</html>

We can also put the ‘hello world’ as a string in the data property as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "hello world"
        },
        template: "<div>{{msg}}</div>"
      });
    </script>
  </body>
</html>

We display the msg property’s value in the template.

Categories
JavaScript Vue

Displaying Dynamic Components in Vuejs

We can display Vuejs components dynamically.

The is prop can be used to display components dynamically.

It just takes a string of the component name.

For instance, we can create components and display them dynamically as follows:

Archives.vue

<template>
  <div id="app">archives</div>
</template>

<script>
export default {
  name: "Archives"
};
</script>

Home.vue

<template>
  <div id="app">home</div>
</template>

<script>
export default {
  name: "Home"
};
</script>

Posts.vue

<template>
  <div id="app">posts</div>
</template>

<script>
export default {
  name: "Posts"
};
</script>

App.vue

<template>
  <div id="app">
    <button @click="currentTab = 'Home'">home</button>
    <button @click="currentTab = 'Posts'">posts</button>
    <button @click="currentTab = 'Archives'">archive</button>
    <component :is="currentTab"></component>
  </div>
</template>

<script>
import Home from "./components/Home";
import Posts from "./components/Posts";
import Archives from "./components/Archives";

export default {
  name: "App",
  components: {
    Home,
    Posts,
    Archives
  },
  data() {
    return {
      currentTab: "home"
    };
  }
};
</script>

We’ve to register the components in App.vue.

Also, we have buttons in the template to change the value of currentTab to the string of the component name.

Then we add the component component with the is prop which is set the name string of the component so that a component can be displayed dynamically.

Now when we click on each button, we see the content of each component displayed.

Categories
JavaScript JavaScript Basics

Formatting Dates with Moment Date Format

With moment.js, we can format dates easily with moment.js.

The list of formatting code that we can use with moment.js are below:

Year, Month, and Day Tokens

  • YYYY – 4 or 2 digit year
  • YY – 2 digit year
  • Y – year with any number of digits and sign
  • Q – quarter of year from 1 to 4
  • M MM – month number
  • MMM MMMM – month name according to the locale
  • D DD – day of the month
  • Do – day of the year
  • X – UNIX timestamp
  • x – UNIX mx timestamp

Week Year, Week, and Weekday Tokens

  • gggg – locale 4 digit week year
  • gg – locale 2 digit week year
  • w ww – locale week of year
  • e – locale day of week
  • ddd dddd – day name
  • GGGG – ISO 4 digit week year
  • GG – ISO 2 digit week year
  • W WW – ISO week of year
  • E – ISO day of week

Locale Aware Formats

  • L – date (in locale format)
  • LL – month name, day of month, year
  • LLL – month name, day of month, year, time
  • LLLL – day of week, month name, day of month, year, time
  • LT – time without seconds
  • LTS – time with seconds

Hour, Minute, Second, Millisecond, and Offset Tokens

  • H HH – hours in 24-hour format from 0 to 23
  • h hh – hours in 12 hours format
  • k kk – hours in 24 hour time from 1 to 24
  • a A – am or pm
  • m mm – minutes
  • s ss – seconds
  • S SS SSS – fractional seconds
  • Z ZZ – offset from UTC

For instance, we can call the format method as follows:

import moment from "moment";
const formattedTime = moment("2010-10-20 4:30").format("YYYY-MM-DD HH:mm");
console.log(formattedTime);

In the code above, we created a moment object with the moment factory function, and then call the format with the format string.

The formatting string is the combination of the parts that are listed above.

It’s very powerful and we can use it to format dates however we like.