What is the correct way to access the `this.' object in Vue.js when it's exported

When dealing with files containing simple data like mutation.js for vuex, the structure often looks similar to this example:

export default {
 ...
 someFunction() {}
 ...
}

Currently, I am facing an issue where I am unable to access this. in order to utilize vue-i18n translations like this.$t('TRANS_TOKEN'). To solve this problem, I considered including Vue in the file using: import vue from 'vue' and then attempting to use vue.$t(..), but unfortunately, that approach did not work as expected.

javascriptvue.jsvuejs2vue-i18n

Answer №1

Why is there a need to do translations in the mutations file? It would be better to keep translations within your components only.

However, if you still want to achieve this, you can follow these steps:

// i18n.js
const i18n = new VueI18n();

export default i18n;

// main.js
import VueI18n from 'vue-i18n';
import i18n from './i18n.js';

Vue.use(VueI18n);

new Vue({
    i18n,
    ...
});

// In any other component, import the i18n instance for translations
import i18n from './i18n.js';

i18n.t('translate this');

Check out the documentation for all available methods on the VueI18n instance.

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

What causes the disappearance of CSS styles when attempting to modify the className in react js?

I am currently working on a basic react application, and I am trying to dynamically change the name of a div element using the following code snippet - <div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} ...

javascripthtmlcssreactjs

Tips for aligning text in MUI Breadcrumbs

I am currently utilizing MUI Breadcrumb within my code and I am seeking a solution to center the content within the Breadcrumb. Below is the code snippet that I have attempted: https://i.stack.imgur.com/7zb1H.png <BreadcrumbStyle style={{marginTop:30}} ...

javascriptcssreactjsmaterial-ui

Angularjs scope's parent id

I'm looking to access or manipulate a scope's grandparent without making things overly complicated. Leveraging the controller as syntax, I can reference the parent controller like so: this.applicationCtrl.something with applicationCtrl > paren ...

javascriptangularjs

Node.js application abruptly halts without warning

I am currently working on a script to parse bitcoin blockchains using an asynchronous queue function from a popular library. However, I have encountered an issue where the code seems to stop without any error message during processing. What could be causin ...

javascriptnode.jsasynchronous

Combining plugin setups and functionalities into a unified script

When it comes to grouping plugin initializations and scripts in a website, I often have a "tools.js" file that contains various functions, click events, and more. I prefer keeping all these script calls centralized in one file for simplicity, organization, ...

javascriptjqueryoptimizationjquery-plugins

Incorporating a feature to leave comments in JSON data through AngularJS

Yesterday, I completed an AngularJS test that presented me with two tasks. One task involved displaying the data of a JSON file on a webpage in HTML form. I accessed the FreshlyPressed JSON via the link "" and effectively showcased the thumbnail, pos ...

javascriptjsonangularjs

What is the best way to start the server when the files are located in separate directories?

I have organized my project into two separate folders, one for the client and one for the server Is there a way to use npm start to simultaneously run both the frontend and backend scripts? Check out the screenshot below: View of Two Folders in my Projec ...

javascriptnode.jsnpmnpm-install

creating dynamic data objects in ajax calls

https://jsfiddle.net/c7n34e3x/1/ from data, data1, and data2, only data is functioning, but it lacks dynamism. This method works as intended. var settings = { "async": true, "crossDomain": true, "url": "https://domain/api/v2/playlists/", ...

javascriptjqueryajaxmultidimensional-array

Issues with Twitter-Bootstrap Modal Functionality

After creating a modal dialogue: <a href="#myModal" role="button" class="btn" data-toggle="modal" id="LaunchDemo">Click here to launch the demo modal</a> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="di ...

javascriptjquerytwitter-bootstrapmodal-dialog

Develop a JavaScript function to generate a multiple selection form

Hey there! I have a question... Can I use JavaScript to create a multiple select form? Here's an example: <select name="item[]"> <option value="0">Option 1</option> <option value="1">Option 2</option> </select> &l ...

javascriptjqueryhtml

"Encountered an error while trying to locate the view" in a simple Express.js application

Embarking on the journey to learn Express.js, I decided to create a simple Express app. The structure of my app.js is as follows: var express = require('express'); var app = express(); app.configure(function(){ app.set('view engine&ap ...

javascriptnode.jsexpresspug

Challenges with the Placement of Buttons

I am facing an issue with the code below: document.addEventListener("DOMContentLoaded", function(event) { // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenConten ...

javascripthtmljquerycss

Achieving the Menu Hover Effect - step by step guide to recreating this stylish effect

I recently came across a stunning hover effect on the main menu of a website (red rectangles above menu). It's quite impressive! I found it here: Now, I want to incorporate this same effect into my own website. Unfortunately, there doesn't seem ...

javascriptjquerycsshovereffects

Utilizing inter-process communication in Electron to establish a global variable from the renderer process

renderer.js ipcRenderer.sendSync('setGlobal', 'globalVarName').varInner.varInner2 = 'result'; main.js global.globalVarName = { varInner: { varInner2: '' }, iWontChange: ' ...

javascripthtmlnode.jselectron

Exploring the power of Vue.js with the versatile v-for

I'm new to vue.js and I'm looking to retrieve data from app.js using v-for in HTML to display it in separate divs. I want each todo item to have its own background and text. var example = new Vue({ el:"#example", data: { todos ...

vue.jsv-for

Can you share a method in javascript that extracts href= and title values, similar to PHP's preg_match_all() function?

I received an HTML string as :var code; I am looking to retrieve all the values of href and title similar to how it is done using PHP's preg_match_all(). I have achieved a similar task in PHP with the provided example but now I am curious about how I ...

phpjavascriptjqueryregex

What is the best way to calculate the time elapsed between two consecutive double clicks using jQuery?

I am trying to calculate the time difference between two clicks on a single button. Here is my code snippet: <a href="#">click here</a> My current JavaScript code to capture the time of each click is as follows: var clickedTime = '&apos ...

javascriptjqueryhtmlclickdouble-click

The PHP page is not receiving the variable passed through AJAX

Within the following code snippet, there seems to be an issue with accessing the dataString variable in the comment.php page. To retrieve the variable name, I utilized $_POST['name']. $(document).ready(function(){ $("#submit").click( function() ...

javascriptphpjqueryajax

When attempting to transfer data to a CSV file from my Firebase database, I encounter an issue where the

I am facing an issue with exporting data from my Firebase Firestore to a .csv file. I have followed all the necessary steps, but whenever I try to add the values for export, they show up as undefined. While I am not an expert in React and consider myself ...

javascriptreactjsfirebasecsvreact-hooks

Is it possible to retrieve text from various iframes using the rangy library?

Here's a question that follows up on a problem I've been having with grabbing selected text from iframes using rangy. The code works well for the first iframe, but when I try to grab elements from multiple iframes using the same button, it doesn& ...

javascriptjqueryiframerangy