https://stackoverflow.com/questions/58972232/what-is-the-purpose-of-main-js-app-vue-in-vue-app
To run a Vue JS application you need to have a basic html page (like index.html)
as an entry point and the intialisation for your Vue app loaded in a <script> in that page.
When you write a Vue JS application you can choose to do it in pure JavaScript,
in TypeScript or in the .vue component format which combines the
HTML, CSS and JavaScript you need to define components.
The vue format is not run directly, it has to be transpiled into plain JavaScript by the Vue-CLI/builder and packed using a packager like WebPack first and then loaded by your entry point.
Luckily the Vue CLI handles nearly all of this process so you can get on with building.
This is typically the root of your application defined in Vue Component file format. It's usually something that defines the template for your page:
This is usually the JavaScript file that will initialise this root component into a element on your page. It is also responsible for setting up plugins and 3rd party components you may want to use in your app:
The index page provides your entry point in html providing an element for VueJs to load into and imports main.js to intialise your app.
async downloadPdfReport( { dispatch }, event) {
const url = `${apiPrefix}/${event.invoice_num}/doc/${event.document}.pdf`;
await axiosInstance
.get(
url,
{
responseType: 'blob',
// contentType: "application/octet-stream;charset=UTF-8"
// contentType: "application/pdf;charset=UTF-8"
})
.then(response => {
let fileURL = window.URL.createObjectURL(new Blob([response.data]));
let fileLink = document.createElement('a');
fileLink.href = fileURL;
fileLink.setAttribute('download', `${event.invoice_num}-${event.document}.pdf`);
document.body.appendChild(fileLink);
fileLink.click();
}).catch(err => {
console.warn('ERROR: download pdf: ', err.response)
dispatch('rootSnackBar',
{
cardColor: 'yellow',
btnColor: 'green',
statusText: `Report Unavailable`,
data: {info: `This report is coming soon!` }
},
{ root: true });
})
},
async getExcelReport( { } ) {
const url = `${apiPrefix}/report`
axiosInstance
.get(url, {responseType: 'blob' })
.then(response => {
let fileURL = window.URL.createObjectURL(new Blob([response.data]));
let fileLink = document.createElement('a');
fileLink.href = fileURL;
fileLink.setAttribute('download', `report.txt`);
document.body.appendChild(fileLink);
fileLink.click();
// console.log(fileURL)
window.URL.revokeObjectURL(fileURL)
// console.log(fileURL)
})
.catch(err => {
console.warn('ExcelReport: ', err)
dispatch('rootSnackBar',
{
cardColor: 'red',
btnColor: 'green',
statusText: `Error`,
data: {info: `Report Unavailable.` }},
{ root: true });
})
},
https://github.com/basarbk/tdd-vue/blob/main/package.json
https://testing-library.com/docs/vue-testing-library/intro/
Testing Dependencies:
yarn add -D jest@26.6.3
yarn add -D vue-jest@next
yarn add -D babel-jest@26.6.3
yarn add -D @testing-library/jest-dom
yarn add -D @testing-library/user-event
yarn add -D @testing-library/vue@next
package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest --watch"
},
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest",
".*\\.(js)$": "babel-jest"
},
"testEnvironment": "jsdom"
}
The difference between these two methods is minor in regards to the axios implementation.
axios.defaults.withCredentials = true;Apart from this they are identical.
https://stackoverflow.com/questions/47946680/axios-interceptor-in-vue-2-js-using-vuex
https://blog.openreplay.com/how-to-make-http-requests-with-axios
For JWT setup axios instance and include interceptors in custom file.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
https://github.com/axios/axios
https://pusher.com/tutorials/authentication-vue-vuex/
// ./src/main.js
import Axios from 'axios'
Vue.prototype.$http = Axios;
const token = localStorage.getItem('token');
if (token) {
Vue.prototype.$http.defaults.headers.common['Authorization'] = token
}
{
"include": [
"./src/**/*"
],
"vueCompilerOptions": {
"target": 2
}
}