1

I'm trying to create SPA\PWA using Vue Js.

I want to import a file of functions to public folder from src folder.

enter image description here

so i do this:

index.html file in public folder:

enter image description here

in the first time i get this err: Uncaught SyntaxError: Cannot use import statement outside a module then I added type="module" but now i get this err: GET http://localhost:8080/src/scripts/sc.js net::ERR_ABORTED 404 (Not Found)

how can i fix that?

Adam
  • 89
  • 1
  • 9
  • Why do you want to do this in the first place? What problem are you trying to solve this way? – Thomas Junk Mar 27 '22 at 17:05
  • @ThomasJunk In the ```sc.js``` file there is a function ```getOS`` that determines the os of the device` I want to use to accept only Android and iOS users to use the site. – Adam Mar 27 '22 at 17:15
  • Okay. My bad. I asked imprecise. Why do you want to "import" the package within the context of the index.html in contrast to just import it in your `main.js` as any other function? What makes you think you have to solve your problem this way and not in another way? Maybe the problems you are facing stem from choosing the wrong approach? – Thomas Junk Mar 27 '22 at 17:26
  • If you want to use imports in your script, you should build a js bundle with webpack/babel or similar. Your frontend code can't known about your source code files tree. – Peterrabbit Mar 27 '22 at 17:26
  • Related SO question: https://stackoverflow.com/questions/66867833/vue-js-import-custom-module – Yogi Mar 27 '22 at 17:27
  • @ThomasJunk Because I don't know how to do this :( ... Can you help me with this? – Adam Mar 27 '22 at 18:27
  • @Roberto no. I don't think these questions are related. Only inasfar that someone wants to import code somewhere which doesn't work as expected. – Thomas Junk Mar 27 '22 at 18:32
  • @Adam Oh. I did help you already – Thomas Junk Mar 27 '22 at 18:33
  • @ThomasJunk can you show me an example – Adam Mar 27 '22 at 18:39
  • The problem is, that you are on the wrong track. I hoped you got the point earlier. – Thomas Junk Mar 27 '22 at 19:29
  • @Adam use npm package for your os detection – Christa Jul 18 '23 at 04:39

2 Answers2

1

Just import your script.js in main.js or which is entry level file you need to import inside it.

Kannu Mandora
  • 479
  • 2
  • 10
0

if i understand you want only ios and android view your app you can use an package like vue-mobile-detection or device-detector-js

npm i vue-mobile-detection

Plugin installation

import VueMobileDetection from "vue-mobile-detection";
import App from "./App.vue";

const app = createApp(App);
app.use(VueMobileDetection);

/* After the install you can use this.$isMobile() in all your vue components */

Using the plugin

<template>
  <div id="app">
    <!-- Use in template -->
    <div v-if="$isMobile()">MOBILE</div>
    <div v-else>DESKTOP OR TABLET (Denied Access)</div>
  </div>
</template>

<script>
export default {
  created() {
    // Use in js
    console.log(this.$isMobile());
  }
};
</script>

also you can use route or your own isMobile function please refer to this thread

Display different Vuejs components for mobile browsers

Christa
  • 398
  • 7