0

I have been trying for days to figure out how to add additional JS files to my Vue Application on my App.vue file. For example, any script which is on a seperate file within my scripts folder. So let's say I want to add a JS file called winelist.js. Can this be done?

<template>
  <div id="app">

    <LoadingScreen :isLoading="isLoading" />
    <div v-if="!isLoading">
      <router-view/>
    </div>

    <PrimaryAppNav/>

  </div>
</template>


<script>

import PrimaryAppNav from './components/PrimaryAppNav.vue'
import LoadingScreen from "./components/LoadingScreen";

export default {
  name: 'app',
  components: {
    PrimaryAppNav,
    LoadingScreen
  },
  data() {
    return { isLoading: true };
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false;
    }, 3000);
  }
}
</script>

<style lang="scss">
    @import 'scss/bootstrap.css';
    @import 'scss/mixins.scss';
    @import 'scss/helpers.scss';
    @import 'scss/main.scss';
</style>
Al-76
  • 1,738
  • 6
  • 22
  • 40

2 Answers2

0

Yes it can be done. Simply do:

import 'path/to/winelist';

in the script section of your vue file

smac89
  • 39,374
  • 15
  • 132
  • 179
  • Yes thats what I thought, but as soon as I add that import './scripts/winelist.js'; when I run npm run build I get errors. Its driving my insane. – Al-76 Jan 30 '19 at 21:32
  • @Al-76 are you not using webpack? – smac89 Jan 30 '19 at 22:33
  • Yes im using Vue2 CLI. It errors if I try an import a regular script like winelist.js, a manifest.json, sw.js, map.js anything. – Al-76 Jan 30 '19 at 22:36
  • @Al-76 if winelist does not export anything, then you can place it in the head of the document. See this other question: https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components – smac89 Jan 30 '19 at 22:43
0

Use @ prefix to point to root folder then you can go anywhere.

import '@/path/to/you/file'
Cong Nguyen
  • 3,199
  • 1
  • 23
  • 22