after use the dat.gui window is not defined in vue, nuxt project

[git-e-001]

<template>
    <canvas id="canvas"></canvas>
</template>

<script>
import { createNoise3D } from 'simplex-noise';
import * as dat from 'dat.gui';

export default {
    name: 'NoiseAbstraction',
    data: () => ({
    }),

    mounted() {
        if (process.browser) {
            /**
                    * requestAnimationFrame
                    */
            window.requestAnimationFrame = (function () {
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback) {
                        window.setTimeout(callback, 1000 / 60);
                    };
            })();


            // Configs

            const Configs = {
                backgroundColor: '#eee9e9',
                particleNum: 1000,
                step: 5,
                base: 1000,
                zInc: 0.001
            };


            // Vars

            let canvas;
            let context;
            let screenWidth;
            let screenHeight;
            let centerX;
            let centerY;
            const particles = [];
            let hueBase = 0;
            let noise3D;
            let zoff = 0;
             let gui;


            // Initialize

            function init() {
                canvas = document.getElementById('canvas');

                window.addEventListener('resize', onWindowResize, false);
                onWindowResize(null);

                for (let i = 0, len = Configs.particleNum; i < len; i++) {
                    initParticle((particles[i] = new Particle()));
                }

                noise3D = createNoise3D();

                canvas.addEventListener('click', onCanvasClick, false);

                 gui = new dat.GUI();
                 gui.add(Configs, 'step', 1, 10);
                 gui.add(Configs, 'base', 500, 3000);
                 gui.add(Configs, 'zInc', 0.0001, 0.01);
                 gui.close();

                update();
            }


            // Event listeners

            function onWindowResize(e) {
                screenWidth = canvas.width = window.innerWidth;
                screenHeight = canvas.height = window.innerHeight;

                centerX = screenWidth / 2;
                centerY = screenHeight / 2;

                context = canvas.getContext('2d');
                context.lineWidth = 0.3;
                context.lineCap = context.lineJoin = 'round';
            }

            function onCanvasClick(e) {
                context.save();
                context.globalAlpha = 0.8;
                context.fillStyle = Configs.backgroundColor;
                context.fillRect(0, 0, screenWidth, screenHeight);
                context.restore();

                noise3D = createNoise3D();
            }


            // Functions

            function getNoise(x, y, z) {
                const octaves = 4;
                const fallout = 0.5;
                let amp = 1; let f = 1; let sum = 0;
                let i;

                for (i = 0; i < octaves; ++i) {
                    amp *= fallout;
                    sum += amp * (noise3D(x * f, y * f, z * f) + 1) * 0.5;
                    f *= 2;
                }

                return sum;
            }

            function initParticle(p) {
                p.x = p.pastX = screenWidth * Math.random();
                p.y = p.pastY = screenHeight * Math.random();
                p.color.h = hueBase + Math.atan2(centerY - p.y, centerX - p.x) * 180 / Math.PI;
                p.color.s = 1;
                p.color.l = 0.5;
                p.color.a = 0;
            }


            // Update

            function update() {
                const step = Configs.step;
                const base = Configs.base;
                let i;
                let p;
                let angle;
                let len;

                for (i = 0, len = particles.length; i < len; i++) {
                    p = particles[i];

                    p.pastX = p.x;
                    p.pastY = p.y;

                    angle = Math.PI * 6 * getNoise(p.x / base * 1.75, p.y / base * 1.75, zoff);
                    p.x += Math.cos(angle) * step;
                    p.y += Math.sin(angle) * step;

                    if (p.color.a < 1) p.color.a += 0.003;

                    context.beginPath();
                    context.strokeStyle = p.color.toString();
                    context.moveTo(p.pastX, p.pastY);
                    context.lineTo(p.x, p.y);
                    context.stroke();

                    if (p.x < 0 || p.x > screenWidth || p.y < 0 || p.y > screenHeight) {
                        initParticle(p);
                    }
                }

                hueBase += 0.1;
                zoff += Configs.zInc;

                requestAnimationFrame(update);
            }


            /**
             * HSLA
             */
            function HSLA(h, s, l, a) {
                this.h = h || 0;
                this.s = s || 0;
                this.l = l || 0;
                this.a = a || 0;
            }

            HSLA.prototype.toString = function () {
                return 'hsla(' + this.h + ',' + (this.s * 100) + '%,' + (this.l * 100) + '%,' + this.a + ')';
            }

            /**
             * Particle
             */
            function Particle(x, y, color) {
                this.x = x || 0;
                this.y = y || 0;
                this.color = color || new HSLA();
                this.pastX = this.x;
                this.pastY = this.y;
            }


            // Run

            init();

        }


    },
    methods: {

    },
};
</script>

How can i solve this problem. Please help me.
version of package

"dat.gui": "^0.7.9",
"simplex-noise": "^4.0.0",

[tadasmajeris]

got the same problem :(

[woshitiancai5686]

import('dat.gui').then(dat => {

})