DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on • Updated on

How to add loader to NuxtJs configuration

If you worked with webpack, you know how confusing it's configuration can become. Because of this, many frameworks & code generators abstract it away from the application developer. It works nice in simple case - like demo apps, but can become painful in when we want to customize the set up. Not only we have to know webpack & it's loaders, but on top of that we need to the quirky way of changing the config, without breaking the framework.


The example application we have here, was created following the npm example for getting started doc

$ npm init nuxt-app webpack-nuxt
Enter fullscreen mode Exit fullscreen mode

The code created by this command you can find here:

As of now, we are limited to webpack in version 4 - it's previous version. And based on this discussion you shouldn't expect update to webpack 5 before major release of nuxt.

Adding loaders

As you can see on extend webpack config, the correct place to tweak webpack config is nuxt.config.js. Let's say we want to load .weird files as just a string. In webpack it's achieved with raw-loader.

You should add inside export default { of nuxt.config.js following code:

  // Build Configuration:
  build: {
    extend(config) {
        test: /\.weird$/,
        loader: "raw-loader"
Enter fullscreen mode Exit fullscreen mode

Note! We are pushing new object to config.module.rules. If we were overriding the whole array, we would drop all the rules defined by the framework, therefore break our build.

Most likely this will fail, so you should install the raw-loader:

$ npm install --save-dev raw-loader
Enter fullscreen mode Exit fullscreen mode

With all that in place, you should be able to have pages/index.vue:

    {{ info }}

import info from "./raw.weird";
export default {
  async asyncData() {
    return { info };
Enter fullscreen mode Exit fullscreen mode

loading content from a raw.weird file next to it.



In this article, we have seen how to customize which loader is used for a given file extension in nuxt. If you want to see the whole code base, you can find it here:

Top comments (0)