We Keep Coding

How to use composable inside a component from the same npm module

I want to create a npm plugin that contains all the elements that I often use in my Nuxt projects.
I followed the instructions here : https://v3.nuxtjs.org/guide/going-further/modules/ and there : https://www.youtube.com/watch?v=7MBOOxUg1yM but I'm still experiencing an issue with the composables.
I added this in the setup function of my module.js :
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url));
addImports({
name: 'useTheme',
as: 'useTheme',
from: resolve(runtimeDir, 'composables')
});
await addComponentsDir({
path: resolve(runtimeDir, 'components'),
prefix: 'my-project'
});
And here's my composables.js :
import { useState } from '#app';
export const useTheme = () => useState('theme', () => 'dark');
And when I try to use the useTheme in my ThemeToggle.vue, I have an error "useTheme is not defined"
<script setup>
const theme = useTheme();
</script>
I tried to add an import like this :
import { useTheme } from '#app';
But it throw me an other error __vite_ssr_import_0__.useTheme is not a function
Any idea ?

laravel-vue-pagination module not loading in app

After loading in the laravel-vue-pagination module, I added it to app.js and tried to use it. I was able to import the component and export as props with no issue, but using the element gives me this error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
I also get a Vetur message in my app.js on hover.
Could not find a declaration file for module 'laravel-vue-pagination'. 'e:/Dev/repos/itgg-core/node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.common.js' implicitly has an 'any' type.
Try `npm i --save-dev #types/laravel-vue-pagination` if it exists or add a new declaration (.d.ts) file containing `declare module 'laravel-vue-pagination';`Vetur(7016)
According to this, I added a laravel-vue-pagination.d.ts file at the root of my project:
declare module 'laravel-vue-pagination' { }
This doesn't seem to help in any way though.
app.js :
require('./bootstrap');
// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
InertiaProgress.init({ color: '#4B5563' });
require('chart.js');
require('laravel-vue-pagination');
I assume something is wrong with the require, or loading the module, but I am not sure. Any help is greatly appreciated.

How to use Vue i18n translation in .js file?

I'm working on VueCLI. I've created .js file that contains rules for inputs:
import Vue from 'vue'
export const $t = (sign) => Vue.prototype.$t(sign)
function checkMail(email) {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ // eslint-disable-line no-eval
return re.test(String(email).toLowerCase())
}
const rules = {
gdprRequired: (v) => !!v || $t('registerPage.gdprNotChecked'),
emailRules: [(v) => checkMail(v) || $t('registerPage.wrongMail')],
}
export default rules
I want to declare rules in external js file and then import it in other vue files. When I do this rule check value properly, but It don't show translated error messeage. I tried export const $t = (sign) => Vue.prototype.$t(sign), bcs similar code worked for nuxt, but here, in VueCLI I got error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "ReferenceError: $t is not defined"
found in
---> <VTextField>
<VForm>
<Register>
<VMain>
<VApp>
<Session> at src/layouts/Session/Session.vue
<App> at src/App.vue
<Root>
and this:
vue.runtime.esm.js?2b0e:1888 ReferenceError: $t is not defined
at rules.emailRules (rules.js?d86d:21)
at VueComponent.validate (index.ts?91bf:254)
at VueComponent.beforeMount (index.ts?91bf:217)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4219)
at mountComponent (vue.runtime.esm.js?2b0e:4043)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5978)
at createElm (vue.runtime.esm.js?2b0e:5925)
Here importing code in 'register.vue':
import rulesConstant from "#/constants/rules";
Computing exported rules to vue variable:
computed: {
rules() {
return rulesConstant;
},
},
Example use:
<v-checkbox
class="custom-checkbox"
:rules="[rules.gdprRequired]"
v-model="gdprCheck"
></v-checkbox>
Can You help me?

Most common way of using vue-i18n outside of Vue components is by importing the singleton instance of VueI18n class and using it directly:
#/i18n/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locales from './locales'
Vue.use(VueI18n);
export default new VueI18n({
locale: 'en',
messages: locales,
});
#/constants/rules
import i18n from '#/i18n/index.js'
const rules = {
gdprRequired: (v) => !!v || i18n.t('registerPage.gdprNotChecked'),
emailRules: [(v) => checkMail(v) || i18n.t('registerPage.wrongMail')],
}
export default rules
This way you have all the instance methods at your disposal, not just t

Error in Vue i18n with TypeScript: "Property '$t' does not exist on type 'VueConstructor'. " . How can I fix it?

In project some common function are in separate .ts files.
How can I use i18 in that cases:
// for i18n
import Vue from 'vue'
declare module 'vue/types/vue' {
interface VueConstructor {
$t: any
}
}
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
t?: any
}
}
(()=>{
const test = Vue.$t('auth.title');
console.log( test )
})()
Return an error:
Property '$t' does not exist on type 'VueConstructor<Vue>"
How can I fix it?

we can achieve the same like below
Step 1: create a separate index.ts file inside a i18n folder (you can do it your own way - root level or any where in your app)
i18n/index.ts
import Vue from 'vue';
import VueI18n from 'vue-i18n';
// register i18n module
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'nb-NO', //if you need get the browser language use following "window.navigator.language"
fallbackLocale: 'en',
messages: {en, no},
silentTranslationWarn: true
})
const translate = (key: string) => {
if (!key) {
return '';
}
return i18n.t(key);
};
export { i18n, translate}; //export above method
Step 2: make sure to use(import) above in main.ts
main.ts
import { i18n } from '#/i18n';
new Vue({ i18n, render: h => h(app) }).$mount('#app')
after above configuration we should be able to use translation in any place that we want in our application
Step 3: How to use it in .ts and .vue files
// first import it into the file
import { translate, i18n } from '#/i18n';
//this is how we can use translation inside a html if we need
<template>
<h1>{{'sample text' | translate}}</h1>
</template>
//this is how we can use translation inside a .ts or .vue files
<script lang='ts'>
//normal scenario
testFunc(){
let test = `${translate('sample text')}`;
console.log(test );
}
//in your case it should be like below
(()=>{
const test = `${translate('auth.title')}`;
console.log( test )
})()
</script>
I hope that this will help you to resolve your issue.

Unexpected token: name (ClassName)

I have the following ECMA 6 class and working on npm with vuejs:
import * as globalTypes from 'aaa/src/store/global/mutation-types.js'
import store from 'aaa/src/store/global/index.js'
import axios from 'axios'
import LoginService from './login.service.js'
const loginService = new LoginService()
export default class RestService {
constructor () {
this.lockScreenIfNeeded = function (lockScreen) {
//
}
this.unlockScreenIfNeeded = function () {
//
}
}
}
In the build procedure,
npm run build
I get the following error for this class:
ERROR in static/js/vendor.61bb6545b80ac2f32bac.js from UglifyJs
Unexpected token: name (RestService) [static/js/vendor.61bb6545b80ac2f32bac.js:10168,6]
What is wrong with this class definition? Or should there be some extra steps taken before building vue project to avoid such errors?