---
title: How to create instances in Vue.js – Jaeves Codelab
description: In this tutorial, we will learn how to create instances in Vue.js. Vue instance are the way to access the properties and methods passed in Vue Class option
---

[Skip to content](https://jaeves.com/codelab/how-to-create-instances-in-vue-js#main-content)

 Close

SEARCH

[Discover Jaeves for Free](https://app.jaeves.com/login)

[![jaeves-2025-logo](https://jaeves.com/hubfs/logos/jaeves-2025-logo.svg)![jaeves-2025-logo](https://jaeves.com/hubfs/logos/jaeves-2025-logo.svg)](https://jaeves.com)

[Discover Jaeves for Free](https://app.jaeves.com/login)

Quick results for "{search\_term}"

TABLE OF CONTENTS

loading...

[Admin](https://jaeves.com/codelab/author/admin)Oct 12, 2023, 6:21:33 PM\< 1 min read

# How to create instances in Vue.js

[Previous](https://jaeves.com/codelab/how-to-create-components-in-vue-js)

<https://jaeves.com/codelab>

[Next](https://jaeves.com/codelab/make-sure-the-page-width-matches-the-viewport-width)

In this tutorial, we will learn how to create instances in Vue.js. Vue instance are the way to access the properties and methods passed in Vue Class options.

### Method 1 : Creating Direct Instance

#### Create File app.html

```
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>
```

#### Create File vue\_component.js

```
var  vm = new Vue({
   el: '#component_test',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      address    : "Mumbai"
   },
   methods: {
      mydetails : function() {
         return "I am "+this.firstname +" "+ this.lastname;
      }
   }
})
```

### Method 2 : Create Instance of Extended Component

```
var _obj = { fname: "Raj", lname: "Singh"};

// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
   return _obj
},
methods: {
   asquare: function () {
      this.fname = 'Chetan';
   }
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
console.log(myComponentInstance.asquare());
console.log(myComponentInstance.$data);
```

Now, run this code and create instance in vue.js

 

---

##### Recommendation

[How to create components in vue.js](https://jaeves.com/codelab/how-to-create-components-in-vue-js/)

For more [Vue.js Tutorials visit Vue.js page](https://jaeves.com/codelab/tag/vue-js/).

 

COMMENTS

## RELATED ARTICLES

[![logo](https://jaeves.com/hubfs/logo-2024-less-points.svg "logo")](https://jaeves.com)

Jaeves is a trailblazing AI-powered content generation tool that revolutionizes your content creation journey. Its user-friendly interface, extensive customization options, and innovative approach make it an invaluable asset for all your content needs. Transform your content strategy with Jaeves today.

All rights reserved

- [Privacy Policy](https://jaeves.com/privacy-policy)

```json
{
  "@context" : "https://schema.org",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "Germany",
    "addressLocality" : "Speyer",
    "addressRegion" : "Rheinland-Pfalz",
    "postalCode" : "67346",
    "streetAddress" : "Gerhart-hauptmann-Str"
  },
  "knowsLanguage" : "en",
  "logo" : {
    "@type" : "ImageObject",
    "url" : "https://139767802.fs1.hubspotusercontent-eu1.net/hubfs/139767802/logo-2024-less-points.svg"
  },
  "name" : "Jaeves AI",
  "url" : "https://jaeves.com/codelab/how-to-create-instances-in-vue-js"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "abstract" : "In this tutorial, we will learn how to create instances in Vue.js. Vue instance are the way to access the properties and methods passed in Vue Class option",
  "author" : {
    "@type" : "Person",
    "name" : "Admin"
  },
  "dateModified" : "",
  "datePublished" : "",
  "headline" : "How to create instances in Vue.js",
  "image" : "",
  "inLanguage" : "en",
  "keywords" : "[]",
  "mainEntityOfPage" : {
    "@type" : "WebPage"
  },
  "name" : "How to create instances in Vue.js",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://139767802.fs1.hubspotusercontent-eu1.net/hubfs/139767802/logo-2024-less-points.svg"
    },
    "name" : "Jaeves AI"
  },
  "text" : "In this tutorial, we will learn how to create instances in Vue.js. Vue instance are the way to access the properties and methods passed in Vue Class options. Method 1 : Creating Direct Instance Create File app.html VueJs Instance Create File vue_component.js var vm = new Vue({ el: '#component_test', data: { firstname : \"Ria\", lastname : \"Singh\", address : \"Mumbai\" }, methods: { mydetails : function() { return \"I am \"+this.firstname +\" \"+ this.lastname; } } }) Method 2 : Create Instance of Extended Component var _obj = { fname: \"Raj\", lname: \"Singh\"}; // must use function when in Vue.extend() var Component = Vue.extend({ data: function () { return _obj }, methods: { asquare: function () { this.fname = 'Chetan'; } } }); var myComponentInstance = new Component(); console.log(myComponentInstance.lname); console.log(myComponentInstance.$data); console.log(myComponentInstance.asquare()); console.log(myComponentInstance.$data); Now, run this code and create instance in vue.js Recommendation How to create components in vue.js For more Vue.js Tutorials visit Vue.js page.",
  "url" : "https://jaeves.com/codelab/how-to-create-instances-in-vue-js",
  "wordCount" : "354"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Admin",
    "url" : "https://jaeves.com/codelab/author/admin"
  },
  "dateModified" : "2023-10-12T22:23:19.386Z",
  "datePublished" : "2023-10-12T22:21:33.000Z",
  "headline" : "How to create instances in Vue.js – Jaeves Codelab",
  "mainEntityOfPage" : {
    "@id" : "https://jaeves.com/codelab/how-to-create-instances-in-vue-js",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://jaeves.com/hubfs/logo-2024-less-points.svg"
    },
    "name" : "Jaeves AI"
  }
}
```

```json
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "description" : "Unlock the Power of AI for Content Creation. Explore Insights, Tips, and Trends on the Jaeves.com Blog. Empower Your Writing Journey Today!",
  "logo" : "https://jaeves.com/hubfs/untitled%20(4).png",
  "name" : "Jaeves AI",
  "sameAs" : [ "https://www.instagram.com/jaeves.ai", "https://www.linkedin.com/company/jaeves-ai", "https://www.youtube.com/@Jaeves_ai", "https://www.tiktok.com/@jaeves_ai" ],
  "url" : "https://jaeves.com"
}
```