After successfully developing a Single Page Application using VueJS, I realized that the SEO performance was not up to par. To combat this, I decided to create a standard HTML website with some pages incorporating VueJS code (since my hosting environment doesn't support Node.js for server-side rendering).
I found guidance on integrating Vue.js into existing websites from this helpful guide
My search.js file holds all my VueJS instance and methods information
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 am facing difficulties in importing libraries such as axios and other components
Whenever I try to add an import statement like:
import axios from "axios";
I encounter an error - Uncaught SyntaxError: Unexpected identifier
I need assistance on where to properly place my imports within the script?