Import js files globally to vuejs 3

Question

Hi I'm trying to import jQuery and THREEJS to my Vue.js cli but I can't find a way to import them globally.

When I try to import them to my .vue file (like home.vue) I get this error

'import' and 'export' may only appear at the top level (5:4)

So I tried to import them to main.js using window.$ = window.jQuery = require('jquery')

But then I get the following error

'$' is not defined

And same goes for THREE

I looked up online but most answers are about vuejs 2

Edit : This is my script in Home.vue

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(200, 200);
$('.icon').append(renderer.domElement);

var geometry = new THREE.IcosahedronBufferGeometry();
var edges = new THREE.EdgesGeometry(geometry);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
scene.add(line);

camera.position.z = 2.5;

var animate = function () {
  requestAnimationFrame(animate);

  line.rotation.x += 0.0025;
  line.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();

This is where I tried to call gloabally THREE and jQuery :

import { createApp } from 'vue'
import App from './App.vue'
import Loading from './Loading.vue'
import router from './router'

window.$ = require('jquery')
window.JQuery = require('jquery')

window.THREE = require('three')


createApp(App).use(router).mount('#app')
createApp(Loading).mount('#loading')

And package.json

{
  "name": "portfolio-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-nprogress": "^0.2.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.9",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2"
  }
}

please share the whole code and package.json

Boussadjra Brahim
– Boussadjra Brahim

2020-11-25 14:06:58 +00:00
Commented Nov 25, 2020 at 14:06 — Boussadjra Brahim
– Boussadjra Brahim, Commented Nov 25, 2020 at 14:06
Done, i edited the post

Elite Cardboard
– Elite Cardboard

2020-11-25 15:56:09 +00:00
Commented Nov 25, 2020 at 15:56 — Elite Cardboard
– Elite Cardboard, Commented Nov 25, 2020 at 15:56

Boussadjra Brahim · Accepted Answer · 2020-11-25 16:08:02Z

3

Don't try to define them globally, just require them when you want to use them, in Home.vue you should have something like :


const $ = require('jquery')
const THREE = require('three')

export default{
name:'Home',
...

mounted(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(200, 200);
$('.icon').append(renderer.domElement);

var geometry = new THREE.IcosahedronBufferGeometry();
var edges = new THREE.EdgesGeometry(geometry);
var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
scene.add(line);

camera.position.z = 2.5;

var animate = function () {
  requestAnimationFrame(animate);

  line.rotation.x += 0.0025;
  line.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();
}

}
}

answered Nov 25, 2020 at 16:08

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elite Cardboard Over a year ago

It worked perfectly thank you ! I'm kinda new to VueJS is it a bad habit to import globaly ?

Boussadjra Brahim Over a year ago

you're welcome, no it's not a bad practice but if you need it in some components just require it inside that components

Simon E. · Accepted Answer · 2024-06-05 06:21:28Z

0

I'm using Vue 3 with Vite and I had no issues with this code in my main.js file:

import SomeLibrary from './SomeLib'

window.SomeLibrary = SomeLibrary;

This created a global variable that I could access from any Vue component.

answered Jun 5, 2024 at 6:21

Simon E.

59.3k18 gold badges146 silver badges140 bronze badges

Collectives™ on Stack Overflow

Import js files globally to vuejs 3

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related