Avoiding layout shifts with Vue.js

I am facing an issue with my Vue.js components causing content to be displaced upon loading.

To address this, I have implemented specific CSS rules targeting the custom HTML tags for my Vue components like so:

custom-tag {
    float: left;
    width: 150px;
    // etc.
}

For instance, this would apply to a CustomTag.vue component and ensure correct layout before Vue.js has fully replaced the custom tag with its corresponding component. This approach helps maintain proper layout even without JavaScript.

While this workaround functions adequately, it is not a flawless solution. Despite caching and separating Vue.js into a vendor file of just 135KB (gzipped), there still seems to be delayed implementation.

Struggling to find concrete solutions or resources for this Vue.js behavior, I am curious how others are managing similar challenges. Could the delay be attributed to slow loading Javascript on my end?

javascriptvue.jsvuejs2vue-component

Answer №1

It is quite unique how long templates may cause the engine to compile before rendering, making it a strange phenomenon.

Prioritize pre-rendering your templates to optimize performance. If you have custom tags in your HTML before rendering, chances are you are not doing this step. Consider using single file components, especially if you come from React where tools like jsx for Vue can be helpful. You could also manually write render functions, although this is not typically recommended.

If you want to completely eliminate the initial render time, server-side rendering through server-side rendering is the only viable option. This way, your app will be served with the initial HTML structure already in place.

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

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10. Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions? ...

javascripthtmlcssinternet-explorer

Explore the capabilities of redux independent of the react framework

I've been searching for hours trying to find a way to access the store (to dispatch and observe) without using React Components, but have had no luck. Here's my situation. I created the store in the root of the App: import { Provider } from &ap ...

javascriptreactjsredux

calculate the count field dynamically based on $bucket boundaries in a MongoDB aggregate operation

I'm currently utilizing the Mongo aggregate framework and have a collection structured like this: [ { _id: 123, name: "john", age: 30, fruit: "apple", }, { _id: 345, name: "moore", age: 45, fruit: "mango ...

javascriptmongodbaggregation-frameworkaggregateaggregate-functions

PHP Implementing real-time dynamic categories

I am working on a project where there are multiple items listed with unique IDs. Each item has corresponding data with the same ID. I want to use JQuery, JScript, and PHP to display options based on the ID of the selected item in real-time. Below is a snip ...

javascriptphpjqueryhtmlcss

Error: The function does not exist for collections.Map

I'm encountering a TypeError on my page: collections.Map is not a function. Below is my JavaScript code and I can't seem to figure out what the issue is. this.state = { collections: SHOP_DATA }; render() { const {collections} = this.sta ...

javascriptreactjs

Is it possible to apply action.payload to multiple keys within an object?

My plan for updating tasks in my Todo app is as follows: addTask: (state, action) => { const newTask = { id: uniqueId(), text: action.payload, completed: false, date: action.payload, }; state.push(newTas ...

javascriptreactjsreduxreact-reduxredux-toolkit

What is the method for retrieving the value from a text input using JavaScript?

let userInput = document.getElementById('myFieldId'); console.log(userInput.value); <!DOCTYPE html> <html> <head> </head> <body> <input type="text" id="myFieldId"/> <script src="main.js">< ...

javascripthtml

Unable to transmit the checked value to the parent component from a custom checkbox component

Within my custom checkbox component, I am attempting to transfer the value of the checkbox form field to the parent component: <template> <div class="custom-checkbox"> <div :class="{ 'bg-white': value }"> <input ...

vue.jsemit

Show a Popup Modal after Submitting a GET Request

How can I display the SQL code returned from various input parameters as a Modal? I am struggling to have the POST request made from inputs show up in the Modal when pressing the submit button. I know Ajax is usually involved in this process, but how do I ...

javascripthtmlflaskbootstrap-4bootstrap-modal

Is there a method to prevent the repetition of this loop?

I have a question regarding my React app development. I am currently using useEffect to loop through six items every time, even when only one item has changed. How can I optimize this so that only the variable that was changed in the reducer function is ...

javascriptreactjs

angularjs: how to connect input date picker to parameters value

Having trouble with my datepicker input values not being passed as parameters in Angular and eventually to a C# parameter. Need help with setting up datepicker input and passing the values correctly. <div layout="column"> <md-content md-prim ...

javascriptangularjsdatepicker

Utilize a function from another component

Is there a way to access a function inside main.js using a button in navbar.js to open a drawer that is located within the main.js component? Do I need to utilize Redux for this task? <Navbar /> <main /> navbar.js <Button type="default ...

javascriptreactjs

The ultimate guide to personalizing group titles in Angular UI-Select

Is there a way in Angular ui-select to customize the group label? I want to make it larger than the selection items as shown in the image below. https://i.stack.imgur.com/ofcak.png The list is currently grouped by country, but how can I adjust the size o ...

javascripthtmlcssangularjsangular-ui-select

What are the issues with using AJAX in conjunction with a for-loop?

I'm currently developing a small application that needs to create work schedules and calculate hours: . I've written the function kalkulacja() to calculate the inputs for each row and output the results through ajax. However, I'm facing an i ...

javascriptphpajaxfor-loop

What is the best way to retrieve a particular field from a Firestore Document using JavaScript?

Within my Firestore database, I have a structure of users that looks like this: https://i.sstatic.net/jgeCq.png The rules set up for this database are as follows: match /users/{userID} { match /public { allow read: if request.auth != nu ...

javascriptfirebasegoogle-cloud-platformgoogle-cloud-firestorenext.js

Switching from using ngRouter to ui-router is a common

After purchasing an angularjs template for my application, I noticed that ngRouter was used instead of ui-router, which I am more comfortable with. So, I decided to switch to ui-router and update all the routes. However, I encountered some extra code in my ...

javascriptangularjsasynchronousangular-ui-routerangularjs-ng-route

Using the hash(#) symbol in Vue 3 for routing

Even though I am using createWebHistory, my URL still contains a hash symbol like localhost/#/projects. Am I overlooking something in my code? How can I get rid of the # symbol? router const routes: Array<RouteRecordRaw> = [ { path: " ...

javascripttypescriptvue.jsvue-router

Having trouble with the installation of @vue/cli using npm? It seems to be throwing

An error occurred: Vue - File C:\Users\ASUS\AppData\Roaming\npm\vue.ps1 cannot be loaded due to disabled running scripts on this system. For more details, please refer to about_Execution_Policies at https:/go.microsoft.com/fwl ...

vue.js

An issue with Azure App Service causing extra slashes in URLs

I am currently developing a node.js application that is being deployed on Azure App Service. On my local machine, the application functions perfectly at: http://localhost:55231/search?q=pink+floyd However, when deployed on Azure, the URL behaves strange ...

javascriptnode.jsazureexpress

Unable to properly delete data in Express/Postgres

After developing a Kanban board using JavaScript without any frameworks on the front end, I integrated Express/Postgres on the back end. However, I am encountering an issue with the 'Delete' operation. While all other CRUD operations are functio ...

javascriptnode.jspostgresqlexpresscrud