Vue- How To Change Style Of A Same Element In Different Components

I am trying to change the style of a specific div from one component to another. Each component is appended to the template in the App component and replaces the

Solution 1:

There is a quick way to do this (not sure if it's best practice) by checking the route path; assume Hello.vue is rendered via the path /hello:

<div id="app" :style="{ padding: $route.path === '/hello' ? '172px' : '0px' }">
  ...
</div>