Injecting styles dynamically with Nuxt: A step-by-step guide

During the development of a Nuxt application integrated with WordPress, I encountered an issue while trying to import custom CSS from the WordPress API.

I am seeking guidance on how to incorporate custom CSS into a template effectively?

<template>
  <div class="container">
    <style>
      {{ content.custom_css }} 
    </style>
    <div class="wordvue mt-5" v-html="content.rendered"></div>
  </div>
</template>

Although this method works flawlessly in development mode, the style tag gets stripped off in production mode causing a hiccup. Are there any suggestions or solutions to rectify this situation?

javascriptvue.jsvuejs2nuxt.js

Answer №1

<style> elements get removed during the compilation process. Fortunately, tmorehouse has provided a workaround using Vue's <component>

<template>
  <div>
    <component is="style">
      .foo[data-id="{{ uniqueId }}"] {
        color: {{ color }};
      }
      .foo[data-id="{{ uniqueId }}"] .bar {
        text-align: {{ align }}
      }
    </component>
    <div class="foo" :id="id" :data-id="uniqueId">
      <div class="bar">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: null
    }
  },
  computed: {
    uniqueId() {
      // Please note that this._uid may not be safe for server-side rendering, consider using a different ID/UUID generator.
      return this.id || this._uid;
    },
    color() {
      return someCondition ? 'red' : '#000';
    },
    align() {
      return someCondition ? 'left' : 'right';
    }
  }
}
</script>

For more details, visit https://forum.vuejs.org/t/about-using-style-tags-inside-templates/7275/3

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

Encountering a problem while attempting to concurrently execute front and backend processes through the npm run both command

npm run both npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfd6d1d0cbdaddd0d0d4ff8f918e918f">[email protected]</a&g ...

javascriptreactjs

What is the best way to create rotational movement for an object in a-frame?

Is there a way to have my entity rotate/spin on the Y-axis? I attempted the following: <a-entity position="-1 0.5 3" animation="property: rotation; to: 0 0 0 ; loop: true; elasticity:1000; dur: 10000" rotation="90 0 0"> <a-box position="1 0 ...

javascripthtmlaframe

Having issues updating cookies with jQuery in ASP.NET framework

On my asp.net web page, I have implemented a search filter functionality using cookies. The filter consists of a checkbox list populated with various categories such as sports, music, and food. Using a jQuery onchange event, I capture the index and categor ...

javascriptjqueryasp.netinternet-explorercookies

Optimizing row display for each page with Material UI's pagination feature

I've been attempting to utilize Material UI table pagination to show 5 rows per page, but for some reason it displays all items on the page and doesn't switch between pages. I'm having trouble figuring out where I'm going wrong. To help ...

javascriptreactjsmaterial-ui

Creating several divs with an image tag within each div individually using Jade HTML pre-processor

Check out the code snippet below: <div id="cubeSpinner"> <div class="face one"> <img src="/images/Windows%20Logo.jpg" class=""> </div> <div class="face two"> <img src="/images/Turtle.jpg" class ...

javascripthtmlnode.jspug

Could this be an unattended 'error' occurrence?

After incorporating dishRouter.js, promoRouter.js, and leaderRouter.js into app.js, I am encountering the following error message error image This snippet showcases my app.js file: var express = require('express'); var path = require('pat ...

javascriptnode.jsexpressnpm

Removing an item from an ng-repeat loop while also dealing with a FormController within

I am encountering a significant issue with form inputs nested within the ng-repeat directive. I require an input that is an array and can vary in size; allowing users to add or remove parts of the form. Within the ng-repeat directive, there is an ng-form ...

javascriptangularjs

"Chrome experiences issues with onmouseover functionality when navigating away from a page or posting content

I'm experiencing an issue with a page where I have onmouseover and onmouseout attributes set for pictures. When submitting, the onmouseover and onmouseout events cause the images to fail, resulting in the image source not found icon being displayed. ...

javascripthtmlonmouseoveronmouseout

The integration between Javascript, PHP, and SQL Server does not display the retrieved data

I am a beginner in PHP and have limited knowledge of Javascript. I am attempting to create a chronometer where the time limit is retrieved from a SQL SERVER database. However, when I assign the value obtained in PHP to a Javascript variable, it returns -1. ...

javascriptphpjsonsql-server

Troubleshooting the Confirm Form Resubmission problem on my website

Hello everyone! I'm working on a website and facing an issue where refreshing the page triggers a confirm form resubmission prompt. Could someone please advise me on how to resolve this? Thank you in advance! ...

javascriptphpcssajaxweb

Creating interactive web applications with Python Flask by utilizing buttons to execute functions

When the button is clicked in my Flask template, I want it to trigger a Python function that I defined in app.py. The function should be accessible within the template by including this code where the function is defined: Here is an example function in ap ...

javascriptpythonajaxjsonflask

AngularJS: accessing siblings by using the ng-click directive

I am currently working on a list (<ul>), which is being used in multiple instances within different ng-repeat iterations on the same page. The initial list items are generated through ng-repeat, with the second to last item containing a span. When t ...

javascriptangularjsdom

What is the correct approach for detecting object collisions in Phaser 3?

Hey everyone, I'm facing a problem and could use some assistance. Currently, I am trying to detect when two containers collide in my project. However, the issue is that the collision is being detected before the objects even start moving on screen. It ...

javascripttypescriptphaser-framework

How can event.target.value and event.target.checked be used simultaneously in React.js?

I have a combination of input fields including text and checkboxes. What is the best way to retrieve all the field values together? Currently, I can only get one value at a time as shown in the example below: handleChange = event => { this.setState( ...

javascriptreactjs

When waiting for proxy leads to access the 'then' property, what should be my next move?

In my code, I am using a special Proxy to imitate a virtual object. The getter of this proxy returns values that are already prepared. After some exploration, I found out that when the proxy is awaited, it triggers the 'then' property of the pro ...

javascriptasync-awaites6-proxy

Initiating Ajax to trigger the body's onLoad event

Whenever I use an ajax call to load a div, the entire page refreshes. It seems that the 'body onload=init()' event is triggered on ajax response causing all the initialization to repeat, which is not desired. Is there a way to only load the div t ...

javascriptajaxonload

Sending numerous arguments to getStaticPaths() in nextjs

I am looking to create two different routes: /midterm/cs611 /finalterm/cs611 My goal is to display distinct content when accessing the /midterm/cs611 endpoint, and different content when accessing the /finalterm/cs611 endpoint. However, I am running into ...

javascriptnext.js

Adjusting the value of 'let' based on the outcome

Can you assist me with this issue? I am attempting to assign a value to a let variable based on the following if conditional block. class Main extends React.Component{ render(){ let content = ''; firebase.auth().onAuthStateChanged(func ...

javascriptreactjs

How can I extract several values from a child component in React?

Is there a way to retrieve two values in a single method of the Parent Component by passing props value from Child Component? What would be the best approach? Form.js (Child Component) // First method -> Extracting the suggestion value and passing i ...

javascriptreactjs

Issue with CSS transition not displaying ng-show elements properly

I'm currently working on incorporating a fade-in effect for text using the second solution from this source when using ng-show. Here is my HTML setup: <input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text" placeholder="Cli ...

javascriptcssangularjs