Import and use three.js library in vue component

For anyone who just want to try out a basic setup. This is the three.js example in a vue component 'ThreeTest'. Project setup with vue-cli 'vue init webpack ProjectName', 'cd ProjectName', 'npm install three --save' and replace the 'HelloWorld' component with this one:

<template>    <div id="container"></div></template><script>import * as Three from 'three'export default {  name: 'ThreeTest',  data() {    return {      camera: null,      scene: null,      renderer: null,      mesh: null    }  },  methods: {    init: function() {        let container = document.getElementById('container');        this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);        this.camera.position.z = 1;        this.scene = new Three.Scene();        let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);        let material = new Three.MeshNormalMaterial();        this.mesh = new Three.Mesh(geometry, material);        this.scene.add(this.mesh);        this.renderer = new Three.WebGLRenderer({antialias: true});        this.renderer.setSize(container.clientWidth, container.clientHeight);        container.appendChild(this.renderer.domElement);    },    animate: function() {        requestAnimationFrame(this.animate);        this.mesh.rotation.x += 0.01;        this.mesh.rotation.y += 0.02;        this.renderer.render(this.scene, this.camera);    }  },  mounted() {      this.init();      this.animate();  }}</script><style scoped>    //TODO give your container a size.</style>

You can use a require statement like this:

const THREE = require('THREE')

But some plugins assume THREE is available on window, so you may want to do window.THREE = require('THREE')

I don't have much experience with import statements, but the above should work.

Since the given answers were not working for me, I'll share the initial setup that worked for me. I am using Nuxt.js in my example.

If this works, a green rotating cube should appear.

<template>  <div id="container"></div></template><script>import * as THREE from 'three'export default {  name: 'ThreeTest',  data() {    return {      cube: null,      renderer: null,      scene: null,      camera: null    }  },  methods: {    init: function() {      this.scene = new THREE.Scene()      this.camera = new THREE.PerspectiveCamera(        75,        window.innerWidth / window.innerHeight,        0.1,        1000      )      this.renderer = new THREE.WebGLRenderer()      this.renderer.setSize(window.innerWidth, window.innerHeight)      document.body.appendChild(this.renderer.domElement)      const geometry = new THREE.BoxGeometry(1, 1, 1)      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })      this.cube = new THREE.Mesh(geometry, material)      this.scene.add(this.cube)      this.camera.position.z = 5      const animate = function() {}    },    animate: function() {      requestAnimationFrame(this.animate)      this.cube.rotation.x += 0.01      this.cube.rotation.y += 0.01      this.renderer.render(this.scene, this.camera)    }  },  mounted() {    this.init()    this.animate()  }}</script>