Quiero importar una clase del archivo .js a mi componente en vue 3 pero me arroja un error de
[Advertencia de Vue]: error no controlado durante la ejecución de la función de representación en...
No capturado (en promesa) TypeError: $setup.Utils.capitalizeFirstLetter no es una función
Entiendo que el problema deriva de como lo uso en el componente, estoy trabajando en una aplicación Laravel 8 con jetstream e inertia js
Mi clase utils.js
export class Utils { capitalizeFirstLetter(str) { //code... } }Mi componente en 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>Alguien que sea mas experto que me pueda iluminar
al final entendi que estaba haciendo mal, tenia que ver algunos ejemplos en vue 2, solo tenia que instanciar la clase en una variable y si la tiene accesible a los metodos
<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>