seo Question posted in
Some basic information to get you started with this can be found here.

VueJS : Adding to existing HTML and handling imports – SEO

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search