Utilizing shared data properties in both JavaScript and SCSS within Vue

Vue.js 2 has caught my interest, especially with the single-file component structure:

<template>
  <h1>Hello World</h1>
</template>


<script>
export default {
  name: 'hello-world',
};
</script>


<style scoped lang="scss">
h1 {
  font-size: 72px;
}
</style>

I'm wondering if there's a standard method for passing variables between SCSS and JS. There's a shared value that I'm currently duplicating in both parts.

This project was created using the Vue CLI, bundled with Webpack 2 and vue-loader. I’m eager to learn if there’s a way to configure it to transfer variables between JS and SCSS seamlessly.

Answer №1

To improve your question, it would be beneficial to provide more specific details. How extensive of an integration are you looking for? One option is to utilize a JSON file to retrieve values as SCSS variables and JavaScript. You can check out this resource for more information: https://github.com/Updater/node-sass-json-importer

For a simpler approach, you can also create inline styles using :style for dynamic styling. For example:

<div :style="{ height: heightInPixels }">...</div>

Here's a demonstration of this concept: https://jsfiddle.net/4s25kca2/

The method you choose will ultimately depend on your specific requirements.

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

Can Javascript be used to open a new window, send POST parameters to it, and pass the request as application/json?

I have a browser client application built with JavaScript that manages a large amount of state data. Sometimes, this data needs to be organized into a structured object and sent to a new window for further processing. Currently, I am using a solution wher ...

Exploring the connections between data in Laravel and Vue to provide insightful displays

I am currently facing an issue with displaying data from a many-to-many relationship in my Vue component. After fetching user data from a REST API, I store it in an object like this: users: {}, //... axios.get("api/user").then(({data}) => (this.users ...

What criteria should I use to determine if a post has been favorited by a user using Mongoose?

Creating a function for users to like posts has been my recent project. Each post is stored as an object in my MongoDB collection with a specific schema. { title: String, text: String } On the other hand, users have their own unique schema as well. ...

Automated updating feature with jQuery

Is there a way to use jQuery code to automatically refresh a page after navigating back in the browser history? Here is an example of what I have tried: jQuery(".form_" + form_count).html("<div id='message'></div>") jQuery('#me ...

The created hook is not pausing for the resolution of the beforeEach action promise

My router has a beforeEach route guard that triggers the fetchWorkspaces action. This action uses Axios to make a request, and then updates the state with the response data. However, when I try to access the state in the created hook of the component and ...

Modifying the background color and linking it to a different class in Android Studio: A step-by-step guide

Recently, I developed a settings feature for my project that allows users to change the background color. However, I noticed that when I return to the home page, the settings are not saving or syncing properly. Any suggestions on how I can sync this info ...

Fill an HTML div with JSON data obtained from a server

I am trying to display JSON data from a json-rpc server inside an HTML div. I can see the data in Chrome and Firefox dev tools, but I need it to be displayed within a specific div on the page. I have written a script to populate the 'mybox' div, ...

What is the best way for me to determine the average number of likes on a post?

I have a Post model with various fields such as author, content, views, likedBy, tags, and comments. model Post { createdAt DateTime @default(now()) updatedAt DateTime @updatedAt id String @id @default(cuid()) author U ...

jQuery Ajax comes with a built-in method for validating serialized forms. This method allows

After creating a form and serializing it to send to my MVC Action method, here is how my jQuery Ajax script looks: $('#submit').click(function () { var jsonObj = $('#form').serialize(); alert(jsonObj); $.ajax({ ty ...

Retrieve a file from a remote server without storing it locally on the server

I need to download a zip file from another server without saving it locally. Currently, I am sending a POST request to the server which responds with the zip file, then I save it on my local server and send it using res.download. What I would like is to di ...

Dispatch keystrokes to a designated text field if they are not taken in by any other input

Is there a way to achieve the functionality seen in apps like Discord, where users can type into the message box even when it's not in focus? I am interested in implementing this feature only if no other input field on the page is currently focused. ...

Retrieve information and functions from one component in a separate component

I currently have two components: ContainerSidebar.vue <!-- Sidebar --> <div id="b-sidebar"> <div class="change-image"> <img :src="profile.avatar != null ? profile.avatar+'#&apo ...

Load an image dynamically within a JavaScript function

I'm currently utilizing a Javascript photo viewer plugin (found here: http://www.photoswipe.com/). My goal is to dynamically update the photos connected to the plugin as the user swipes through different images. To achieve this, I am using a Javascri ...

Executing Javascript functions using a variable string name

Seeking advice on the most effective approach for calling functions with variable names that adhere to a specific rule. I am exploring alternatives to using eval() due to the numerous concerns raised about its usage online. In my current setup, each group ...

How can I prevent my copy variable from altering the original value variable in Node.js?

Why is it that when I change a variable that is a copy of another variable, both are affected? This concept doesn't seem logical to me. Can you please explain why this happens? It's my first time encountering this behavior in node.js. I am famili ...

Calculate the total of all values associated with a dynamically generated key within an array of objects

I'm trying to calculate the sum of similar keys in an array of objects. Each object in the array will have some common keys, but not all arrays will share the same set of keys. I'm considering storing these keys in a separate array and then loopi ...

What is the method, by using JavaScript or CSS, to include extra space at the end of text block without starting a new line?

Imagine having some text, and at the conclusion of each paragraph there is a (more)... link. The layout ends up looking like this: This is just an example paragraph. Click on the more link for additional information. (more...) Now comes the desire to i ...

Invoke ajax to reset session once user navigates away from page

I am looking for a solution to automatically clear the PHP session array every time a user exits my webpage. However, I need to exclude cases where the user clicks on links with query strings. I attempted using Javascript code, but it did not work as expec ...

Ways to transmit the appropriate model

Using AJAX, I am sending a model to the server via a POST request. I have defined a model and a controller method for processing it. public class TestDto: BaseDto { [Required] public ProductGalleryDto GalleryProduct { get; set; } public int ...

Is there a way to eliminate unnecessary chunks from MUI in NextJS?

https://i.sstatic.net/zAkV0.png I recently created a single page and noticed that there is a significant amount of unused JavaScript in my codebase. Specifically, I am using MUI and React icons. Any suggestions on how to efficiently manage this issue? T ...