The scope of the example below is very small, but if you want to see a real implementation, you can view this repository I just created that shows a real tool I built for one of my Vue applications. …
If you’ve ever used vh units to size a layout element and previewed that layout in a mobile browser, you’ll quickly find a fun little quirk that’s quite annoying.
As soon as the user starts to scroll, the navigation bar is removed and the height of the viewport is now larger than it once was, and that means all of your elements sized with vh are now adjusting to this new reality. Fun, right?
I often use the vh unit when designing the first element on a mobile page to either be full screen, or slightly less than full screen so the next section is peaking above the fold. Rather than giving up on the vh unit for this goal, I came up with a Vue Directive solution to lock in the height of an element. …
After working on several large Vue projects, one thing that started to annoy me was the need to import common sass variables and mixins on every component:
I thought to myself: there has to be a better way! I wanted to remove the need for relative imports and also auto-import my global sass tools into every Vue component. After a little research, I found the solution!
Let’s assume a default Vue project using the webpack template, with a similar file structure:
The mixins.scss and variables.scss should be self explanatory: that’s where you define those respective sass variables.
Inside of globals.scss you would aggregate all of your globals. In this instance, we would import our mixins and…