If you are developing multiple components in Vue, you might be facing the situation that you have the following folder structure:
.
└── src/
└── components/
├── utils/
│ └── some_cool_functions.js
├── component_a.vue
└── component_b.vue
$ cat some_cool_functions.js
export function function_b(id) {
console.log("Do some stuff in function a " + id)
}
export function function_b(id) {
console.log("Do some stuff in function b " + id)
}
<template>
<div>
....
<v-btn @click="function_a(item.id)" color="error">Some Button for Function A</v-btn>
<v-btn @click="function_b(item.id)" color="error">Some Button for Function B</v-btn>
</div>
</template>
<script>
import { function_a, function_b } from './functions/some_cool_functions.js'
export default {
components: {
},
setup() {
},
data() {
return {
some_value: ''
};
},
methods: {
function_a, // <-- add this
function_b,
}
}
</script>
Then you have a button in component_a.vue
which would like use the function from utils script. Then you need to do the following:
- Import the functions
- Add the functions to the
method
section