How to make a reusable vue js component?

Question

I am new to Vue JS. I have created two different components Login and Register but with same form code I mean like email input and password input and a submit button, I got familiar with Mixins, so I created a mixin for submitting the form and I am using the same mixin in both register and login

// this is mixin

data() {
    return {
      email: "",
      password: ""
    };
  },

  methods: {
    onSubmit() {
      console.log(this.email);
    },
  },

How can I create a custom reusable component like this mixin , so I just want to pass props ? below is the login form and the register form is same like this I don't want to repeat

// this is Login Component

<v-form>

<v-text-field
type="email"
v-model="email"
label="E-Mail"></v-text-field>

<v-text-field
type="password"
v-model="password"
label="Password"></v-text-field>
<v-btn @click="onSubmit()" color="info">Submit</v-btn>

<script>
import CredMixin from "../mixins/Credentials";
export default {
  name: "Login",
  mixins: [CredMixin],
};
</script>

3khdr · Accepted Answer · 2021-02-06 10:52:31Z

1

You can use slot inside your code.

answered Feb 6, 2021 at 10:52

3khdr

591 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Scott Davies · Accepted Answer · 2021-02-06 09:26:32Z

0

Vue makes it really simple to build reusable components.

You could create a component called form in components folder called customForm.vue

In that file you hold the everything thats required for the component in that file so its self contained.

<template> 
<v-form>

<v-text-field
type="email"
v-model="email"
label="E-Mail"></v-text-field>

<v-text-field
type="password"
v-model="password"
label="Password"></v-text-field>
<v-btn @click="onSubmit()" color="info">Submit</v-btn>
</template>
<script>
import CredMixin from "../path/to/your/mixin";
export default {
  name: "Login",
  mixins: [CredMixin],
};
</script>

Then in your layout or view you import the component.

import customForm from "@/components/customForm.vue"

Then you use it in your template like this;

<custom-form></custom-form>

You must also declare it as a component.

In your script for the layout or view.

components: {
   customForm, 
}

Then you can use that component in both layouts. Well in any layout like that so and so forth.

answered Feb 6, 2021 at 9:26

Scott Davies

1176 bronze badges

1 Comment

Scott Davies Over a year ago

Also if you want to pass props you do that like so <custom-form :customProp= someProp > </custom-form>

ecoplaneteer · Accepted Answer · 2021-02-06 09:33:47Z

0

This problem will be solved by adding template property to your mixin.

Do not add template section in the login and register component.

{
    template: `<v-form>

    <v-text-field
    type="email"
    v-model="email"
    label="E-Mail"></v-text-field>
    
    <v-text-field
    type="password"
    v-model="password"
    label="Password"></v-text-field>
    <v-btn @click="onSubmit()" color="info">Submit</v-btn>
    </v-form>
        `,

    data() {
       ...
      },
    
    methods: {
     ...
    },

}

Another solution is to use slot.

answered Feb 6, 2021 at 9:33

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to make a reusable vue js component?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related