Nuxt | Sometimes HTML tags are only visible inside JavaScript tags when viewing the source code in a browser

Upon visiting the following page and right clicking to select "View page source", you may notice that the text "100s Man With Van Providers" is located within 

<script type="text/javascript">
instead of an HTML tag.

These scripts are transmitted from the back-end API to the front-end (Nuxt.js/vue.js)

Although I attempted to utilize Vue.js lifecycle events created and mounted, I am encountering difficulties.

What may I be doing incorrectly?

I am aware that this method is detrimental to SEO.

Update:

  • Within this webpage, I utilized no-ssr. Could this possibly be the root of the problem?
  • After running npm run build and deploying the application on a Node.js server, the issue persists.
javascriptvue.jsseonuxt.js

Answer №1

Perhaps it would be beneficial to ensure that the mode property is properly set to 'universal' in nuxt.config.js

https://nuxtjs.org/api/configuration-mode/

Update:

It seems that the issue may be related to fetching data in the created or mounted lifecycle hooks, as they might not be server-side rendered

If you want to display content for better SEO, consider fetching your data in asyncData()

For example:

Before

created(){
  this.getSomethingFromAPI()
}

After 

asyncData(){
  this.getSomethingFromAPI()
}

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 could be the reason for rowsAffected not returning an integer value?

Currently, I am working on executing the SQLite statement in an iOS application. To verify the count of affected records, I have implemented success and error callback methods. Upon receiving the results, although the variables are correctly defined, I en ...

javascriptiosangularjssqlite

The value of req.headers('Authorization') has not been defined

I'm experiencing difficulty with my code as the token is coming back as undefined. Here is the frontend section: export const fetchUser = async (token: any) => { const res = await axios.post('/user/getuser', { headers ...

javascriptreactjstypescript

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...

javascriptcss

Instructions on incorporating domains into next.config.js for the "next/image" function with the help of a plugin

Here is the configuration I am currently using. // next.config.js const withImages = require("next-images"); module.exports = withImages({ webpack(config, options) { return config; }, }); I need to include this code in order to allow images from ...

javascriptnext.jsnextjs-image

Reasons why the Express Route fails to store cache while executed in a separate file

My code works fine when it's all in one file, but the caching stops working when I move it to a separate middleware file. Can someone help me understand why the caching isn't functioning properly in my middleware? Here is the working code: var e ...

javascriptnode.jsexpressredis

"Encountering an issue when attempting to load the vue-cookies module in

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'get' of undefined" found in ---> <Anonymous> <Root> console.err ...

vue.jsjestjs

Implementing validation and displaying fields with v-model in vue.js

Looking at this code snippet: <button type="button @click="editing=true">Edit</button> <form v-show="editing" @submit="onSubmit"> <textarea v-model="text"></textarea> </form> <div> Current value: {{text}} </ ...

javascriptformsvalidationvue.jsv-model

Utilizing the map() function to parse a Json object

Looking for guidance with working with a JSON object structured like this: {"Title":"asb","Date":"2019","Other":"not important"} How can I correctly read this object and render it in <ul><li> format? Please Note: I have attempted to assign th ...

javascriptjsonreactjsobject

What is the most effective method to retrieve the UserName using Javascript?

Can someone please explain to me the difference between using session["user"].name and session["user:name"]? // I don't understand why we have to put the user session into the JavaScript global space :( var session = { user: { "Id":"d675c ...

javascriptjson

Svelte's feature prevents users from inputting on Mapbox

My goal is to prevent user input when the variable cssDisableUserInput is set to true. Here's what I have within my main tags: <div id=userinput disabled={cssDisableUserInput}> <div id="map"> </div> Within my CSS, I&a ...

javascripthtmlcsssveltemapbox-gl-js

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

javascripthtmlcssweb-componentshadow-dom

Accessing Cognito using ReactJS and fetching data with specific parameters

I'm currently attempting to retrieve the email of the user who is logged in and use it within my fetch() call. I have successfully obtained the email using getfirstapi() and used it in my form, but I am encountering issues when trying to pass it into ...

javascriptreactjsamazon-web-servicesamazon-cognito

What is the best way to send an object key/value pair to a Vue template?

I've made progress on my component, but I'm facing an issue where the links are going to http://localhost:5173/[object%20Object]. It seems like I've reached a mental roadblock. This is what my component looks like: <template lang="p ...

javascriptnode.jsvue.jstemplatespug

Tips for customizing the appearance of popup windows

I want to enhance the appearance of my popup window by applying a different format for opening it. How can I style it so that it looks visually appealing when the popup window opens? You can find below the source code I am working with: HTML: <div onM ...

javascripthtmlcssdom-events

Updating the content with HTML and JavaScript

Hello everyone, I am currently working on a project to change the content of a div using JavaScript for educational purposes. Here is what I have done so far - <div id="navbar"> ... <ul> <li> <text onclick="getWordProcessing() ...

javascripthtmlonclick

Implementing a Tri-state Checkbox in AngularJS

I've come across various discussions on implementing a 3-state checkbox with a directive or using CSS tricks (such as setting 'indeterminate=true' which doesn't seem to work). However, I'm curious if there's another method to ...

javascripthtmlcssangularjsweb

The connected callback does not trigger when custom HTML elements are being created

Attempting to craft a custom HTML tag using JavaScript, I aimed to create the custom element with ES6 JavaScript syntax. The code devised for this task reads as follows: customElements.define('neo-element', NeoElement); function NeoElement (){ ...

javascripthtmlcssecmascript-6ecmascript-5

Transforming Image Annotation from Angular 1 to Angular 4: Overcoming Conversion Challenges and Comparing Equivalents from 1.x to 4

After exploring various options, I am still struggling to resolve the conversion error that occurs when trying to convert my Angular 1.x script for image annotation into Angular 4. The equivalent of angular 1.x code in Angular 4 is not readily available. H ...

javascriptangularjsangularannotations

How can I retrieve the current value of a text element using jQuery?

Having an issue with my text input element where an event is triggered on blur and when the user presses enter. The problem arises when the user inputs "foo" and presses enter; the val() function returns null initially, but after the blur event, it return ...

javascriptjqueryforms

Having issues with running multiple Vue forms with VeeValidate simultaneously on a single page

I am having trouble using VeeValidate validation on multiple forms within a Vue component. I have attempted to limit the validation to specific scopes, but it does not seem to be recognizing them correctly. The validation works fine on the first form (regi ...

vue.jsvuejs2vue-componentvee-validate