Solidity Hot Loader with Vue

Hey, I am trying to get this (Building an OpenZeppelin dapp with Solidity Hot Loader) up and running in my Vue projects.
I found these resources so far:
https://cli.vuejs.org/guide/webpack.html#chaining-advanced
https://github.com/neutrinojs/webpack-chain
https://github.com/OpenZeppelin/solidity-loader

I have it setup like so in my vue.config.js file

module.exports = {
  transpileDependencies: ['vuetify'],
  chainWebpack: (config) => {
    config.module
      .rule('sol')
      .test(/\.sol$/)
      .use('json-loader')
      .loader('json-loader')
      .end()
      .use('@openzeppelin/solidity-loader')
      .loader('@openzeppelin/solidity-loader')
      .tap((options) => {
        return {
          network: 'development',
          disabled: false,
        }
      })
  },
}

And the relevant output when inspected looks like this.

  /* config.module.rule('sol') */
  {
    test: /\.sol$/,
    use: [
      /* config.module.rule('sol').use('json-loader') */
      {
        loader: 'json-loader'
      },
      /* config.module.rule('sol').use('@openzeppelin/solidity-loader') */
      {
        loader: '@openzeppelin/solidity-loader',
        options: {
          network: 'development',
          disabled: false
        }
      }
    ]
  }

Wish me luck on getting this up and running. If it works I want to make this all work with a 1 line command to setup new projects with a Vue-CLI plugin.

1 Like

Hi @Skyler_Fly,

Good luck. Let the community know how you get on.