I want to use Vue 3 without build and without CDN

Viewed 7138

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.

2 Answers
  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/vue@3.0.11/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

To use Vue as a module from a local installation, you don't want to explicitly include it in a script tag in your page. Instead, import it in the scripts that use it. The whole idea of modules is that you can import them which makes explicitly including them in your page obsolete.

In https://bitbucket.org/letsdebugit/minimalistic-vue/src/master/index.js, import Vue:

import * as Vue from "./local/path/to/vue.esm-browser.prod.js";
Related