Search code examples
vue.jscdnunpkg

links not working anymore: e.g. https://unpkg.com/vue@3.2.30/dist/vue.min.js


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

https://unpkg.com/vue@3.2.30/dist/vue.min.js

Which link can I use instead?

THX

<script src="https://unpkg.com/vue@3.2.30/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?


Solution

  • 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/vue@2.6.14/dist/vue.min.js"></script>
                                         👆
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.min.js"></script>
                                                👆
    <script src="https://unpkg.com/bootstrap-vue@2.21.2/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/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@2.21.2/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/axios@0.25.0/dist/axios.min.js"></script>
    
    <div id="app">
      <div>counter: {{ counter }}</div>
      <button @click="counter++">+</button>
    </div>