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
– Harry Pehkonen, Commented Jan 21, 2017 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 (stackoverflow.com/questions/19323409/…). 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
– FirstRedPepper, Commented Jan 23, 2017 at 22:24

Justin MacArthur · Accepted Answer · 2017-01-23 22:10:13Z

27

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>

answered Jan 23, 2017 at 22:10

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

naoru Over a year ago

If i want the store to be on a seperate file how to i achieve this?

Justin MacArthur Over a year ago

@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

Collectives™ on Stack Overflow

Vue.js - Vuex without Webpack?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related