Tips for modifying the HTML generated on the server side before it is rendered on the client side in Quasar

Just starting out with Vue.js and looking to implement Vue I18n. However, I'm facing an issue setting the locale on Vue I18n and also setting the HTML lang attribute to the same locale. The challenge is that I can't access the document object in Server Side Rendered (SSR) mode. So, how can I modify the Server Side Rendered HTML before Client Side rendering?

  if (process.env.CLIENT) // This does not seem good hydration.
    document.querySelector('html').setAttribute('lang', i18n.global.locale.value)

I attempted to address the issue using the Meta plugin, but the lang attribute remains 'en-US'.

useMeta(() => ({
  htmlAttr: {
    lang: i18n.global.locale.value
  }
}))

Opting not to utilize the Quasar Language Pack due to limitations on region codes, I made the decision to configure the Quasar Lang settings with no html attrs set to true:

// quasar.config.js
    framework: {
      config: {
        lang: {
          noHtmlAttrs: true // add this
        }
      },

Despite this change, the lang attribute still disappears from the HTML tag.

javascriptvue.jsinternationalizationserver-side-renderingquasar-framework

Answer №1

After some trial and error, I managed to make it work by implementing the following functions:

const languagePacks = import.meta.glob(
  '../../node_modules/quasar/lang/(en-GB|es).js'
)

const localeLanguagePacks = Object.entries(languagePacks).map(([path, load]) => ({
  locale: path.slice(31, -3),
  load,
  path
}))

export async function loadLanguage(locale) {
  const [langLocale] = locale.split('-')

  const langPack = await localeLanguagePacks
    .find((pack) => pack.locale === locale || pack.locale === langLocale)
    .load()

  return { ...langPack, isoName: locale }
}

To use this functionality, simply invoke the function like this:

import { Lang } from 'Quasar'
(async () =>
  Lang.set(await loadLanguage(i18n.global.locale.value))
)()

Make sure to configure it in the following way:

// quasar.config.js
    framework: {
      config: {},

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

Selenium is throwing an ElementNotInteractableError indicating that the element is not able to be

Today I decided to dive into learning Selenium, but I've hit a roadblock while trying to click on an element that looks like this: <a rel="nofollow" style="" href="javascript:void(0);" time="" itemid="15 ...

javascriptseleniumselenium-webdriverxpathwebdriverwait

Modify the HTML select tag to toggle from a selected checkbox

What should I do when a certain option is checked in the checkbox, and that label needs to be shown in the select tag? https://i.stack.imgur.com/ZxRNF.png Checkbox input <input type="checkbox" class="toggle-product pull-right" @if(!isset($restrictedPr ...

javascriptphpjqueryhtmllaravel

What is causing the malfunction in jQuery version 1.7.x?

Here is a code snippet demonstrating the issue I am facing: var $div = $('<div>'); $('span').live('click', function() { this.innerHTML = 'changed'; }); $div.append( $('<span>span</span>& ...

javascriptjquery

There could be an error in the function, as it is not toggling the image as

I'm trying to create a script that toggles between the "like" and "unlike" images, but for some reason it's not working. I'm new to javascript so any help would be appreciated. <script> function toggleImage(){ var like ...

javascripthtmlfunctiononclickgetelementbyid

challenges encountered when saving a getjson request as a variable

I am experiencing difficulties in retrieving a variable from a getJSON() request. The issue lies within the following three functions: function getPcLatitude() { // onchange var funcid = "get_postcode_latitude"; var postcode = parseInt($('#i ...

javascriptgetjson

Managing iframe scrolling using the parent window's scrollbar

I am currently working on an iframe to be utilized across various domains. The functionality of this iframe involves displaying a data list that updates when the bottom of the scroll is reached. An issue I encountered is that the parent window, where the ...

javascriptjqueryhtmliframescroll

What steps should I take to ensure my Vue component is displaying the Vue-Chart.js line chart correctly?

I'm looking to utilize the vue-chartjs library to create a line chart. However, despite not encountering any errors, my current implementation only renders a blank canvas. When inspecting the developer view, I can see that all the data is being printe ...

vue.jsvuejs2vue-componentvue-mixin

Enhancing Vue with Vueify and Babel 7

I am currently utilizing a combination of Gulp, Browserify, Vueify, and Babel for my vue.js project development. My hands are tied to using Gulp as the build system and unfortunately, I had to upgrade from Babel 6 to Babel 7 due to the integration of Jest ...

vue.jsgulpbabeljsvueify

Unlocking the Power of Large Numbers in Angular with Webpack

Error: [$injector:unpr] Unknown provider: BigNumberProvider Recently, I embarked on a new project using Webpack + Angular.JS and encountered an issue while trying to incorporate Bignumber.js. Here's a snippet of my Webpack configuration: resolv ...

javascriptangularjswebpack

Hiding the y-axis on a msstackedcolumn2dlinedy Fusion Chart: A step-by-step guide

Currently, I am utilizing the msstackedcolumn2dlinedy fusion charts. To see an example of this in action, please take a look at this fiddle: Fiddle The objective I have is to hide the y-axis value on the right side of this chart. Can anyone provide guida ...

javascriptjquery

Can you explain the significance of the '#' symbol within the input tag?

I was reading an article about Angular 2 and came across a code snippet that uses <input type='text' #hobby>. This "#" symbol is being used to extract the value typed into the textbox without using ngModal. I am confused about what exactly ...

javascripthtmlangular

eslint alert: The aria-current attribute must have a value that is a single token from the following list: page, step, location, date, time, true

<div role="button" tabIndex="0" className="nav-link pad-0-r" aria-current={'${selectedTab === item ? 'page' : 'false'}'} onClick={()=> onClick(item)} onKeyDown= ...

javascripthtmlreactjsbootstrap-4runtime-error

How can Vue.js pass an array from a child component to its parent component?

I'm currently developing a contact book app and I have created a modal within a child component that contains a form with several input fields. My goal is to utilize the values entered in the form and add them to the parent component. I have successfu ...

javascriptvue.jsvue-component

ajaxStart event does not trigger when making an Ajax POST request

My ajaxStart event functions properly for ajax loads, but it does not work at all when I do a POST request. The following code is consistently rendered on all pages: $(document).ajaxComplete(function () { hideIcon(); if (stepState !== &a ...

javascriptjqueryajax

Cancelling an ongoing AWS S3 upload with Angular 2/Javascript on button click

I'm currently working with Angular 2 and I have successfully implemented an S3 upload feature using the AWS S3 SDK in JavaScript. However, I am now facing a challenge: how can I cancel the upload if a user clicks on a button? I've attempted the ...

javascriptangularamazon-s3

JavaScript for Acrobat

I am currently creating a form in Adobe Acrobat and incorporating additional functionality using JavaScript. I have been searching for information on the control classes for the form, such as the member variables of a CheckBox, but haven't found any c ...

javascriptadobeacrobat

What is the default state of ng-switch in AngularJS?

I am completely new to using AngularJS and I have a question about setting a default ng-switch state in the following Plunkr. Currently, I can only get it to work when clicking, but ideally the menu should be displayed automatically if the user button is t ...

javascriptangularjs

"Dynamically generated websites, backend processing, React framework Nextjs, Content Management System WordPress

I'm interested in creating a primarily static site using Next.js, but I also need the ability to provide customers with price estimates based on their specifications. The calculation process needs to be kept private and not exposed to anyone else (oth ...

javascriptwordpressnext.jsserver-side-renderingstatic-site

Our website features a dynamic functionality where users can select from two dropdown lists with identical values. Upon selecting multiple values from the first dropdown, the corresponding values in

When selecting multiple values from the first dropdown list, the second dropdown list will automatically have the same value selected as the first dropdown. ...

javascriptjqueryhtmljspbootstrap-4

Show a nested array retrieved from JSON in a React component

I need assistance in displaying data from my JSON file, particularly an innested array using map(). The field I want to display as a list is analyzedInstructions, which looks like this: How to prep (from p How to prep /p) Steps: Remove the cauliflower&a ...

javascriptreactjsjsonreact-nativereact-router