Is there a way to incorporate i18n into functions.js within vue.js?

I have a functions.js file containing multiple user functions. I am trying to incorporate i18n within one of these functions, but using this.$t is not yielding the expected results. How can I properly implement i18n in this scenario?

functions.js

import Vue from 'vue'
import moment from 'moment'

export default {

delete() {

        return new Promise((resolve) => {
            Vue.swal({
                title: this.$t('delete'),
                type: 'warning',
                showCancelButton: true,
                //confirmButtonColor: '#3085d6',
                //cancelButtonColor: '#d33',
                confirmButtonText: 'Eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.value) resolve();
            });
        });
        
    }

{{ $t('back') }} is functional within <template>, and this.$t('back') also works within a vue component.

javascriptvue.js

Answer №1

To start, make sure to establish a new file called src/i18n.js and fill it with the given code:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locales from "./locales.json";

Vue.use(VueI18n);

const i18n = new VueI18n(
  {
    fallbackLocale: 'en',
    locale: 'en',
    messages: locales,
    silentTranslationWarn: true
  });

export default i18n;

After that, remember to import it into both your main.js and functions.js

import i18n from './i18n'
import Vue from 'vue'
import App from './App.vue'

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

import Vue from 'vue'
import moment from 'moment'
import i18n from './i18n'

export default {

delete() {

        return new Promise((resolve) => {
            Vue.swal({
                title: i18n.t('delete'),
                type: 'warning',
                showCancelButton: true,
                //confirmButtonColor: '#3085d6',
                //cancelButtonColor: '#d33',
                confirmButtonText: 'Eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.value) resolve();
            });
        });
        
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionalities of Google Maps are experiencing issues within AngularJS when utilizing the $route feature

Having Issues with Google Maps in AngularJS when using <ng-view></ng-view> Routing Configuration app.config(function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider .when('/', { t ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3angular-ui-router

What steps can be taken to align the description in the center of the div?

I am working on an image slider where the description slides in from left to right. My goal is to align the text justified and center it on the page. However, when I try adding CSS properties, it doesn't seem to have any effect. setting.$descpanel=$( ...

javascriptcss

A guide on clearing the selected value in a dropdown menu with Angular.js

Can someone assist me with setting the drop-down value to blank after completing an action in Angular.js? Below is my code explanation: <div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable"> <div class="table-r ...

javascriptangularjs

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

Seeking assistance with customizing the "this week" button on the free admin dashboard template provided by Bootstrap 4. Looking to turn it into a dropdown feature but unable to achieve success after two days of research and watching tutorials. See code sn ...

javascriptjquerycssbootstrap-4

Having trouble passing arguments to button methods in jasmine when applying vue and moment libraries

I am working on unit testing a Vue app using `jasmine` and `karma`. Here is an example of the code inside one of my components: After fetching data from a database with `v-for=(data,index)`, I am displaying the `data.date` in the template: <p class=&qu ...

javascriptvue.jsvuejs2jasminekarma-jasmine

Yep, the condition within a nested object is true

Having an issue with conditional validation using yup. My goal is to make certain properties required for shipping when the checkbox is not toggled. I am utilizing yup's when feature, but I'm struggling to access the boolean value of sameShipping ...

javascriptreactjsyupreact-hook-form

Utilizing Embedded JSON with Vue.js

Can you explain how to extract data from embedded JSON? The data is coming from the database in Vue.js and I can see it in the debugger in Google Chrome. There is a one-to-many relationship in the database where one recipe can have many ingredients. Here ...

jsonsqlitevue.js

What is the best way to turn off default CSS styling in KendoUI?

I am facing an issue in my application where I am using global CSS definitions for "INPUT", "SELECT", and other elements. The problem arises when I try to incorporate KendoUI widgets, as they override my default CSS styles. For instance, my CSS code looks ...

javascriptjqueryhtmlcsskendo-ui

Efficient PHP login process enhanced by jQuery

After a user logs out on my website, they are redirected to the home page. However, if they navigate back in their browser, it still shows them as logged in (although logged in features don't work). I am considering implementing a solution where I us ...

javascriptphpajax

Unable to locate the module named '@/components/HelloWorld.vue' or its associated type declarations. Error encountered in Vetur(2307)

After creating a new project using the vue command line tool with "vue create .", I encountered an issue when trying to run "npm serve". The component import is showing up as red, even though I haven't made any changes to the project yet. The error m ...

vue.jsvuejs2

Ramda represents a distinct alternative to traditional vanilla JavaScript

I'm feeling a bit confused about how Ramda really works. I found this code and I'm not entirely sure how it functions. const render = curry( (renderer, value) => is(Function, renderer) && renderer(value) ); I just need to grasp an ...

javascriptramda.js

Changing the Displayed Content with a Simple Click of a Link

Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...

javascriptjqueryhtmlcss

Manipulating the DOM with Javascript and jQuery: Adding a new element and retrieving its reference

I am encountering an issue with a Web App that relies on JavaScript and jQuery. Essentially, the website includes a button that triggers a JavaScript function when clicked. Within this function, there are two other functions named Foo and Bar. Foo generate ...

javascriptjqueryappend

What are the best techniques for distinguishing the selected selector in jQuery?

$('#select_id1, #select_id2, #select_id3').change(function() { // Depending on which select element has changed, 'str' should be set accordingly. // For '#select_id1', 'str' should be equal to 'select_id ...

javascriptjquery

The issue of elements flickering while being hidden and shown with jQuery has been observed in both Chrome and

Having trouble with a simple animation using jQuery? While it may work smoothly in Firefox, you might be experiencing flickering in Chrome and Edge. Check out this jsfiddle for reference: HTML <div id="boxes-wrapper"> <div class="box"></ ...

javascriptjquerycssgoogle-chromeanimation

Ways to Soothe Long Polling

Currently, I am developing a basic chat feature using AJAX in a function that triggers a setTimeout call to itself upon successful execution. This occurs approximately every 30 seconds. While this setup serves its purpose, I am seeking a more immediate not ...

javascriptjqueryajaxlong-polling

Working with scrollIntoView in useEffect (Encountering an error trying to access 'scrollIntoView' property of null)

Starting from scratch, I'm working on setting up my webpage and crafting some code. function BasicDetails() { React.useEffect(()=>{ scrollView(); }, []); function scrollView() { document.getElementById('main-root& ...

javascriptreactjsreact-hooks

React BrowserRouter causing issues with "invalid hook calls"

Just starting out with React and I am working on setting up paths using BrowserRouter, Route, and Routes in my code. import React from "react" import "./App.css"; import { BrowserRouter as Router, Route, Routes } from 'react-router ...

javascriptreactjsreact-hooksreact-router-dom

Ways to confirm the actual openness of Express app's connection to MongoDB?

I'm currently developing an Angular 7 application that utilizes MongoDB, Node.js, and Express. One issue I encountered is that if I start my Express app (using the npm start command) before connecting to MongoDB (using the mongod command), the Express ...

javascriptmongodbexpressmongoose

Arrange the HTML DOM elements in the order of their appearance in a list

Is it possible to rearrange the order of <div> and its elements based on database information? For example, consider the following HTML structure: <div id="container"> <div id="A"> Form elements for A</div> <div id="B"& ...

javascriptjqueryhtmlangularjs