I want to import a class from the .js file to my component in vue 3 but it throws me an error of
[Vue warn]: Unhandled error during execution of render function at...
Uncaught (in promise) TypeError: $setup.Utils.capitalizeFirstLetter is not a function
I understand that the problem derives from how I use it in the component, I am working on a Laravel 8 application with jetstream and inertia js
My class utils.js
export class Utils {
capitalizeFirstLetter(str) {
//code...
}
}
My component in vue
<template>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ Utils.capitalizeFirstLetter(title) }}
</h2>
</template>
<script>
import { Utils } from '@/utils/utils.js'
export default {
setup() {
return {
Utils
}
}
};
</script>
Someone who is more expert that can enlighten me
in the end I understood what I was doing wrong, I had to see some examples in vue 2, you just had to instantiate the class in a variable and if you have it accessible to the methods
<template>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ Util.capitalizeFirstLetter(title) }}
</h2>
</template>
<script>
import { Utils } from '@/utils/utils.js'
export default {
setup() {
const Util = new Utils;
return {
Util
}
}
};
</script>