Can i use it with vue?

[ch-zgh-1993]

I want to use arcgis with vue, and i want to konw how to do? can you give me some advances? thank you a lot.

[ch-zgh-1993]

i have finished. so closed..

[pineapplegum]

@ch-zgh-1993: Did you manage to get it to work with Vue? I cannot get it to work.

[crackernutter]

I cannot get it to work with Vue-cli either...

[odoe]

For cli's you can use esri-loader as using this plugin would require ejecting from the cli of your project. With vue specifically, I haven't been able to get the plugin to work with the vue-loader webpack plugin.

[crackernutter]

@odoe Just today (after three days of trial and error), I seem to have gotten the arcgis webpack plugin working with a vue-cli app and @alaframboise's calcite-maps. Here is a link to a working repo.

Of note: needed to add an .eslintrc file, needed to modify eslint rules in chainWebpack, needed to set node.global to false, and in order to use dojo based local files (such as those in calcite-maps) needed to add a string-replace-loader to replace dojo/domReady! with dojo/ready a la this issue. Also wasn't able to use @vue/app as a babel preset. Don't really understand how this might affect an app - maybe will throw warnings for some vue directives in html markup? Who knows.

But the app works any only loads service worker libraries from esri's cdn. Although according to the network tab it loads dojo-lite and dojo_en_us multiple times.

[crackernutter]

Update: serving the app locally works using the cli (npm run serve), but serving the built app (npm run build) gives another error with the dojo-webpack-plugin.

[crackernutter]

Following up - fixed last night's issue by adding

optimization: {
            minimize: true,
            splitChunks: {
              minChunks:Infinity,
                chunks: 'all',
            }
        }

to vue.config.js (configureWebpack) and a production webpack build is working in addition to a development one.

Issue had something to do with window.webpackJsonP as referenced in this issue.

Just updated the example repo with the fix

[odoe]

Wow, that is some awesome work!

@crackernutter can I add a link to your repo in frameworks resources guide, I'm sure others would be very interested. Thank you very much for your detective skills!

[crackernutter]

@odoe Sure thing! Add away! And thanks for your work on this plugin - I've got a larger Vue app currently using esri-loader and I'm excited to integrate this instead.

[alexandre-combemorel]

@crackernutter mate I buy you a beer if you come along Brisbane ! You saved me an insane amount of time. Thank you so much

On top of that here is few things I figure out along integrating it to the boilerplate: https://github.com/chrisvfritz/vue-enterprise-boilerplate

Here is my vue.config.js:

const appConfig = require('./src/app.config')

/** @type import('@vue/cli-service').ProjectOptions */
module.exports = {
  // https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
  chainWebpack(config) {
    // We provide the app's title in Webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    config.set('name', appConfig.title)

    // Set up all the aliases we use in our app.
    config.resolve.alias.clear().merge(require('./aliases.config').webpack)

    // Don't allow importing .vue files without the extension, as
    // it's necessary for some Vetur autocompletions.
    config.resolve.extensions.delete('.vue')

    // Only enable performance hints for production builds,
    // outside of tests.
    config.performance.hints(
      process.env.NODE_ENV === 'production' &&
      !process.env.VUE_APP_TEST &&
      'warning'
    )

    config
      .plugin('arcgiswebpack')
      .use('@arcgis/webpack-plugin', [{
        root: ".",
        locales: ["en"]
      }])

    config.module.rule('strreplace').test(/\.js$/).use('string-replace-loader').loader('string-replace-loader').options({
      search: "dojo/domReady!",
      replace: "dojo/ready"
    });
  },
  css: {
    // Enable CSS source maps.
    sourceMap: true,
  },
  // Configure Webpack's dev server.
  // https://cli.vuejs.org/guide/cli-service.html
  devServer: {
    ...(process.env.API_BASE_URL // Proxy API endpoints to the production base URL.
      ?
      {
        proxy: {
          '/api': {
            target: process.env.API_BASE_URL,
          },
        },
      } // Proxy API endpoints a local mock API.
      :
      {
        before: require('./tests/mock-api'),
      }),
  },
  configureWebpack: {
    node: {
      global: false,
    },
    optimization: {
      minimize: true,
      splitChunks: {
        minChunks: Infinity,
        chunks: 'all',
      }
    }
  },
}

Regarding the ESLINT issue which seems to have been the issue, I could just avoid it by ignoring the dojo/ folder in the .eslintignore. This way I could keep all the eslint config from the boilerplate.

Regarding babel configuration, I left the default presets which is '@vue/app'. In the doc it is mentioning that the modules are set to "false" by default, and it the included features are the one from @babel/preset-env. So far it works for me on dev and build.