Vue.js - Vuex without Webpack?

Question

I'm using ASP.Net Web Pages (vb Razor) and have been having trouble getting Webpack setup with it and have been suggested elsewhere on stackoverflow (How to setup ASP.NET Core + Vue.Js?) to simply use the vue.js CDN without a build system.

Question is: it would be now great to be able to use Vuex for state management but it seems like all the examples use webpack - are there anyways around this without a build system or alternatives to vuex for creating a datastore and mantaining vue's reactivity?

Thanks, and sorry for the uncommon question - I know most people use webpack!

There shouldn't be any problem with *NOT* using webpack. Perhaps the problem is with the `export` and `import` parts. What have you tried so far? — Harry Pehkonen, Jan 21 '17 at 19:00
Thanks Harry! I have been using ASP.Net javascript bundler to bundle all the javascript libraries but it seems like the issue was asp.net doesn't keep the order you set (http://stackoverflow.com/questions/19323409/asp-net-mvc-bundle-config-order). It seemed as if webpack was needed but turned out to be a nuance with ASP.Net. Thank you for the offer to help! Much appreciated! Would you know how to setup a function like in the link but written in VB for ASP.Net Razor Web Pages? — FirstRedPepper, Jan 23 '17 at 22:24

score 27 · Accepted Answer · answered Jan 23 '17 at 22:10

Without a package builder you can use the CDN libraries for vuejs and vuex. It's simply a matter of including the vuex cdn after the vuejs cdn as vuex is designed to detect Vue and auto install itself.

you can see a jsfiddle showcasing it here example

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{ $store.state.count }}</div>
      <button v-on:click="buttonClick">Click Me</button>
    </div>
    <script type="text/javascript">
      new Vue(
        {
          'el': '#app',
          'store': new Vuex.Store(
            {
              state: {
                count: 0
              },
              mutations: {
                increment (state) {
                  state.count++
                }
              }
            }
          ),
          'methods': {
            'buttonClick': function() {
              this.$store.commit('increment')
            }
          }
        }
      )
    </script>
  </body>
</html>

If i want the store to be on a seperate file how to i achieve this? — naoru, Aug 19 '20 at 04:50
@naoru Simply house it in it's on .js file something along the lines of ```const vuex_store = new Vuex.Store(...)``` then in the main script tag you'd have `'store': vuex_store` — Justin MacArthur, Aug 20 '20 at 05:53

Vue.js - Vuex without Webpack?

1 Answers1