VueJS : Adding to existing HTML and handling imports

Question

So I built a Single Page Application in VueJS which works nicely but the SEO sucks as expected, so I decided to make a normal HTML site with some pages having VueJS code (Remote hosting so no node else I would go SSR).

I followed this guide which works fin

I have a search.js which contains my VueJS instance and methods etc

Vue.component('todo-component', {
    template: '#todo-component',
    data: function () {
        return {
            items: [
                {
                    id: 'item-1',
                    title: 'Checkout vue',
                    completed: false
                }, {
                    id: 'item-2',
                    title: 'Use this stuff!!',
                    completed: false
                }
            ],
            newItem: ''

        };
    },
    methods: {
        addItem: function () {
            if (this.newItem) {
                var item = {
                    id: Math.random(0, 10000),
                    title: this.newItem,
                    completed: false
                };

                this.items.push(item);
                this.newItem = '';
            }
        }
    }
});

var app = new Vue({
    el: '#vue-app'
});

However, I need to import stuff like axios and other components

if I add an import statement to the script above, it comes up with

import axios from "axios";

Uncaught SyntaxError: Unexpected identifier

Where should my imports go?

DO you use any transpiler for your javascript? import is only natively supported by Google Chrome — Ferrybig
– Ferrybig, Commented Oct 14, 2018 at 16:00
I am not sure what transpiler are, I need this to work in all browsers — Burf2000
– Burf2000, Commented Oct 14, 2018 at 16:06
import cannot usually be used in embedded scripts; it's a feature that the transpiler (webpack or Vue CLI) handles by replacing the import with the code from the other module itself, but since you don't have a transpiler for directly embedding Vue in a page, you can't use it. Details here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Ken Kinder
– Ken Kinder, Commented Oct 14, 2018 at 20:06

tony19 · Accepted Answer · 2022-07-15 21:45:04Z

3

Since you are directly writing code running in the browser, you can simply include the axios cdn in your html code before search.js is loaded:

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

As for components import, you can read more about component registration here. Generally if your components are registered globally via Vue.component('my-component', {}) syntax, you should be able to directly use it within your code.

edited Jul 15, 2022 at 21:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 14, 2018 at 16:04

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

1 Comment

Burf2000 Over a year ago

Excellent example mate, I don't suppose you know how to get lodash _.debounce to work with it to as it does not know what _ is (worked in my SPA)

Boussadjra Brahim · Accepted Answer · 2018-10-14 18:24:49Z

You're missing axios library so add it as follow :

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

i'm also providing you of how to use it when you work with browser :

new Vue({
  el: '#app',
  data: {
    dataReceived: '',
  },
  methods: {
    getData() {
      axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
        .then((response) => {
          this.dataReceived = response.data;
          console.log(this.dataReceived);
          return this.dataReceived;
        })
    }
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
  <div id="app">
    <button @click="getData" type="button">getData</button>
    <p>dataReceived: {{ dataReceived }}</p>
  </div>
</body>

Collectives™ on Stack Overflow

VueJS : Adding to existing HTML and handling imports

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related