Search code examples
vue.jsunity-game-engineself-hosting

I want to use Vue 3 without build and without CDN


https://v3.vuejs.org/guide/installation.html#download-and-self-host

https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler

how do I import vue without CDN?

so what I care about is not having a build step. everything in pure human-legible js.

I found this https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack

I'm going to try and implement it inside unity Embedded browser https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459

the challenge is that my interface cannot load things from the web and it can't be compiled.


Solution

    1. Create index.html

    index.html (using Vue 3 - important!)

    <!doctype html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Minimalistic Vue JS</title>
      <script type="text/javascript" src="./vue.global.prod.js"></script>
    </head>
    
    <body>
      <div id="app">
        {{ message }}
      </div>
    </body>
    <script>
        var app = Vue.createApp({
          data() {
            return {
              message: "Hello world"
            }
          }
        })
        app.mount("#app")
    </script>
    </html>
    
    1. Download vue.global.prod.js from https://unpkg.com/browse/[email protected]/dist/vue.global.prod.js and save it along index.html

    2. Open index.html in browser

    Works just fine in Chrome or Firefox.

    Notes

    for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root

    Note: following is related to the repo linked before question was changed

    The code in repo is written for Vue 2 (just try to open https://unpkg.com/vue in the browser). So if you downloaded distros for Vue 3 (for example the link I'm using above) the code from repo will not work

    Even if you download Vue 2 version, the code in the repo will not work when opened from file system as it is using native ES6 modules - problem I described in the previous version of my answer:

    As described here and here ES6 modules are always loaded with CORS. So just opening the index.html in the browser (without using server) will not work (definitely does not work in Chrome). Maybe Unity Embeded Browser has this restrictions weakened (as it's purpose is to be embeded) but without possibility to use desktop browser to develop and test your app, your experience will be terrible. I would reconsider the decision not to use bundler...

    Update 1 Building Vue.js Applications Without webpack (sample project) will not help you either as it is again using native ES6 modules