Methods in Vue js 3 , What are methods in vue js 3 , How to create methods in vue js 3

14-Sep-2024

Hello developers in this tutorial we will discuss about how to create methods in vue js

S.no	Contents-topics
1	What are Methods
2	Setup new Vue js project
3	Create new Vue js file
4	Router file
5	Run the Code
6	Output

1:What are Methods

Methods are similar to function in javscript as similar while we are using functions in javascript , to perform any piece of code by means of any action is known as methods in vue js.

2:Setup new Vue js project

For setting up new vue js project pls consider link given below

SETUP AND INSTALL VUE JS 3

3:Create new Vue js file

Create a new vue js view file src/views/Methods.vue
code for Methods.vue : Copy

<h2>Welcome to DeveloperCodez</h2><br/>

<h2>Methods</h2><br/>

<button v-on:click="showAlert">Click to Show Alert</button><br/>

<button v-on:click="showValue(20)">Click to Show Value</button>

</template>

export default{

name:'Methods',

methods:{

showAlert( )

{

alert("This is Called by functions") ;

showValue(val)

{

alert("Value is "+ val);

}

</script>

4:Router File

If your project don't have default router file consider below post for how to create custom route file in vue js

SETUP CUSTOM ROUTE FILE IN VUE JS 3

code for route.js :Copy

import { createRouter, createWebHistory } from 'vue-router'

import Methods from '../views/Methods.vue'

const router = createRouter({

history: createWebHistory(import.meta.env.BASE_URL),

routes: [

{

path: '/',

name: 'Methods',

component: Methods

]

})

export default router

5:Run the project

To check and run the project simply hit npm run dev on the cmd

6:Output

Tags: Vue.js 3, Create components, Vue components, Single File Components (SFC), Component structure, Component options, Component , pass data in vue js , pass functions from components in vue js 3 , pass data and functions from components in vue js 3 methods in vue js 3 , what are methods in vue js 3 , how to create methods in vue js 3,Front-end development , vue js tutorial , vue js 3 , vue js 3 tutorial ,,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.