Category: Vue

We can add basic drag and drop features into a Vue app.

The vuedraggable library makes adding drag and drop easy.

To use it, first we install it by running:

npm i -S vuedraggable

Then we can use it as follows:

App.vue

<template>
  <div id="app">
    <draggable group="words" :list="arr" @change="log">
      <div v-for="element in arr" :key="element">{{element}}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "App",
  components: {
    draggable
  },
  data() {
    return {
      arr: ['item1', 'item2', 'item3']
    };
  },
  methods: {
    log(e) {
      console.log(e);
    }
  }
};
</script>

We add the draggable component to the App component and we can display a list where we can drag them items around the way we wish to.

As we drag and drop the items, we log the changed with the log method, which has the element that’s been moved and the original and new index of the item.

We can also add headers or footers by using the slots as follows:

App.vue

<template>
  <div id="app">
    <draggable group="words" :list="arr" @change="log">
      <div v-for="element in arr" :key="element">{{element}}</div>
      <button slot="footer" @click="addItem">Add</button>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "App",
  components: {
    draggable
  },
  data() {
    return {
      arr: ["item1", "item2", "item3"]
    };
  },
  methods: {
    log(e) {
      console.log(e);
    },
    addItem() {
      this.arr = [...this.arr, `item${this.arr.length + 1}`];
    }
  }
};
</script>

We added a button by writing:

<button slot="footer" @click="addItem">Add</button>

As long as the slot’s value is footer, it’ll be displayed below the list.

If we change the slot’s value to header, then it’ll displayed on top of the list:

<template>
  <div id="app">
    <draggable group="words" :list="arr" @change="log">
      <button slot="header" @click="addItem">Add</button>
      <div v-for="element in arr" :key="element">{{element}}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "App",
  components: {
    draggable
  },
  data() {
    return {
      arr: ["item1", "item2", "item3"]
    };
  },
  methods: {
    log(e) {
      console.log(e);
    },
    addItem() {
      this.arr = [...this.arr, `item${this.arr.length + 1}`];
    }
  }
};
</script>

vuedraggable is very useful for creating drag and drop lists with ease.

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.

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.

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.

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.