links not working anymore: e.g. https://unpkg.com/[email protected]/dist/vue.min.js

Question

the CDN-link from unpkg isn't working anymore. Other older versions do not work either.

https://unpkg.com/[email protected]/dist/vue.min.js

Which link can I use instead?

THX

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<!-- <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> -->

<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<script src="https://unpkg.com/vue-router"></script>

<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

these are my sources to load that always worked. How do I replace them?

Answer 1

For Vue 3, the production minified files have .prod.js as their file extension. But it looks like you actually need Vue 2 because you were using the CDN links without a fixed version specifier:

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
                               ^^^ ⛔️ defaults to latest
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
                               ^^^^^^^^^^ ⛔️ no longer Vue 2

Vue recently updated vue@latest to version 3. Similarly, vue-router@latest was also updated to version 4, which is only compatible with Vue 3.

To stick with Vue 2 compatible packages, use the following version specifiers in the CDN URLs:

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
                                     
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
                                            
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
                                               

To avoid these unexpected failures from latest tag updates in the future, you should always use specific fixed versions for CDN links in production.

new Vue({
  data: {
    counter: 0,
  },
}).$mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

<div id="app">
  <div>counter: {{ counter }}</div>
  <button @click="counter++">+</button>
</div>