Aliases
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeAs our app grows, there's going to be more and more directories and paths to think about. In products.vue, we go up one directory to get to components. And in sidebar, we need to go up two directories to get to our CSS files. This isn't a huge deal, but it's only going to get worse as we add even more directories and sub-directories.
To help with this, the Vue world commonly uses a feature called Webpack aliases. Open up your webpack.config.js file. It doesn't matter where... but I'll go after .enablesSingleRuntimeChunk(), add .addAliases() and pass an object. Add a key called @ set to path.resolve().
Oh, but stop right there: PhpStorm is mad! This path thing is a core Node module and we need to require it first. At the top: var path = require('path').
The path.resolve() function is the least important part of this whole process: it's a fancy way in Node to create a path. Pass it __dirname - that's a Node variable that means "the directory of this file" - then assets and finally js.
| // ... line 1 | |
| var path = require('path'); | |
| // ... lines 3 - 9 | |
| Encore | |
| // ... lines 11 - 38 | |
| // This is our alias to the root vue components dir | |
| .addAliases({ | |
| '@': path.resolve(__dirname, 'assets', 'js'), | |
| styles: path.resolve(__dirname, 'assets', 'scss'), | |
| }) | |
| // ... lines 44 - 104 |
Before I explain this, duplicate the line and create one more alias called styles that points at the scss directory. And... I don't need those quotes around styles.
So... what the heck does this do? An alias is kind of like a fake directory. Thanks to this, when we import files in our code, we can prefix the path with @ and Webpack will know that we're referring to the assets/js directory. We can do the same with styles/: that's a shortcut to the assets/scss directory.
Let's see this in action. First, because we just made a change to our Webpack config, at your terminal, hit Control + C to stop Encore and then restart it:
yarn dev-server --hot
Once that finishes.. just to be safe, let's refresh. Everything still works. Now let's use our shiny new, optional alias shortcut!
Using the Alias
Start in products.vue. Instead of ../, which gets us up to the js/ directory, we can say @/components/catalog... because @ is an alias to the same directory.
| // ... lines 1 - 14 | |
| <script> | |
| import Catalog from '@/components/catalog'; | |
| import Sidebar from '@/components/sidebar'; | |
| // ... lines 18 - 25 | |
| </script> |
The nice thing is that if we move our code to a different directory, this path will keep working: @ always points to the js/ folder.
We don't have to use this everywhere, but let's update a few other spots, like catalog.vue. Same thing: @/components/legend.
| // ... lines 1 - 22 | |
| <script> | |
| import LegendComponent from '@/components/legend'; | |
| // ... lines 25 - 36 | |
| </script> |
And then in sidebar.vue, it's a bit different. Down in the style tag, we can use the styles alias. But when you're inside CSS code and want to use an alias, you need one extra thing: a ~ prefix. So in this case, ~styles/components.
| // ... lines 1 - 35 | |
| <style lang="scss" module> | |
| @import '~styles/components/light-component'; | |
| // ... lines 38 - 47 | |
| </style> |
Oh, and I totally messed up! You can see a build error from Webpack. When I set up the styles alias, the path should be scss, not css.
| // ... lines 1 - 9 | |
| Encore | |
| // ... lines 11 - 39 | |
| .addAliases({ | |
| // ... line 41 | |
| styles: path.resolve(__dirname, 'assets', 'scss'), | |
| }) | |
| // ... lines 44 - 104 |
Over at the terminal, here's the fully angry error: file to import not found or unreadable... because we gave it a bad path. I'll stop and restart Encore one more time:
yarn dev-server --hot
Now... it's happy! Let's update two more files to get a feel for this. Open products.js. Instead of ./pages, we can say @/pages.
| // ... line 1 | |
| import App from '@/pages/products'; | |
| // ... lines 3 - 7 |
And one more in app.js. To load the CSS file, we can say styles/ and then we don't the scss directory.
| // ... lines 1 - 8 | |
| import 'styles/app.scss'; |
But... maybe you were expecting me to say ~styles like we did earlier? Here's the deal: when you're inside of a JavaScript file, you can just use the word styles even if you referring to a CSS file. The ~ thing is only needed when you're doing the import from inside of CSS itself, like in the style tag.
So... those are Webpack aliases. If you love them, great! If you think they're some sort of strange sorcery, don't use them. The @ alias is common in the Vue world. So at the very least, if you see Vue code importing @/something, now you'll understand the dark magic that makes this work.
Next: let's see our second custom Vue syntax: the v-for directive for looping.
Hi,
when i look the tutorial video I saw that on your Phpstorm you haven't got error on aliases, how you inform to Phpstorm that the aliases are not errors ? this is a special plugin you have ?