Using sl-vue-tree with vue-cli3.1 on internet explorer 11

Hello, I am a Japanese individual and my proficiency in English is lacking, so please bear with me. Currently, I am using vue-cli3.1 and I am looking to incorporate the sl-vue-tree module into my project for compatibility with ie11. The documentation mentions that it can be used on ie11 with babel-polyfill, but unfortunately, I seem to be unable to implement babel-polyfill correctly.

I followed the steps of adding "@babel/polyfill" through yarn and importing it at the top of the main.ts file. However, despite these efforts, the module does not seem to work as expected.

import "@babel/polyfill"

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <SlVueTree v-model="treeModel">

    </SlVueTree>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

//sl-vue-tree
import SlVueTree from "sl-vue-tree-original";


@Component({
  components: {
    SlVueTree
  }
})
export default class About extends Vue {

  public treeModel = [
    {
        "title": "Item1",
        "isLeaf": true
    },
    {
        "title": "Item2",
        "isLeaf": true
    },
    {
        "title": "Folder1",
        "isExpanded": true,
        "children": [
            {
                "title": "Item3",
                "isLeaf": true
            },
            {
                "title": "Item4",
                "isLeaf": true
            },
            {
                "title": "Folder2",
                "children": [
                    {
                        "title": "Item5",
                        "isLeaf": true
                    }
                ]
            }
        ],
        "isSelected": true
    },
    {
        "title": "Item6",
        "isLeaf": true
    }
];

  }
}
</script>

Answer №1

I managed to find a solution by utilizing Vue cli 3.6 along with sl-vue-tree version 1.8.4.

First, I added the transpileDependencies to my vue.config.js file:

module.exports = {
 transpileDependencies: ['sl-vue-tree'],
 ...
}

Next, here is a snippet from my babel.config.js file:

module.exports = {
 presets: [
  ["@vue/app", {
    modules: "commonjs"
  }]
 ]
};

Within my Vue component, I simply imported sl-vue-tree like this:

import slVueTree from "sl-vue-tree";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the use of getText() in Protractor with Page Object Model in Javascript

Having trouble retrieving specific values from my page object. The getText() method is returning the entire object instead of just the text, likely due to it being a Promise. I can provide my code if necessary, but I'm aiming to achieve something sim ...

Exploring the power of utilizing multiple classes with conditions in Angular 2+

Can you help me figure out how to use a condition for selecting multiple classes with [ngClass] in Angular? <td> <span [ngClass]="{ 'badge badge-success': server.type === 'PRODUCTION', 'ba ...

What is the best way to showcase a value in JavaScript using CSS styling?

I'm looking to customize the background, font style, and outline for both open and closed elements in the code snippet below: a.innerHTML = "We are Open now now."; a.innerHTML = "We are Closed, arm."; Additionally, I want to appl ...

What is the best way to use Shadcn to incorporate a calendar that takes up half of my website?

Currently, I am in the process of developing a scheduling appointment system. My main challenge is getting the calendar to take up half of my page's space. Despite my attempts to adjust its height and width, I have not been successful in seeing any ch ...

The Angular 2 view will remain unchanged until the user interacts with a different input box

I am currently working on implementing form validation using Reactive Forms in Angular 2. Here is the scenario: There are two input fields Here are image examples for step 1 and step 2: https://i.stack.imgur.com/nZlkk.png https://i.stack.imgur.com/jNIFj ...

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

"Unlock the secret to effortlessly redirecting users to a designated page when they click the browser's back

So I'm facing the challenge of disabling the browser back button on multiple routes and sending requests to the backend is resulting in inconsistent behavior. I don't want to create a multitude of similar API requests each time. Currently, I have ...

Having trouble triggering the onclick event on a dynamically created table using JavaScript

I am facing an issue with adding a table programmatically that has an onclick event triggering a specific JavaScript function using the row's id for editing purposes. Unfortunately, the function is not being called as expected. I have attempted to mod ...

Playing around with TypeScript + lambda expressions + lambda tiers (AWS)

Having trouble importing modules for jest tests in a setup involving lambdas, lambda layers, and tests. Here is the file structure: backend/ ├─ jest.config.js ├─ package.json ├─ babel.config.js ├─ layers/ │ ├─ tsconfig.json │ ├ ...

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...

Tips for creating objects with optional properties

I need help figuring out the best way to handle situations where a variable can either be defined or empty. Currently, I'm using Partial, but it doesn't provide the accurate outcome. The specific scenario involves MobX observables that begin as ...

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

My current project involves working with Electron, and it consists of three essential files. The first file is index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styles ...

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

After transitioning a react js project to react js with typescript, I made sure to move all the code to the typescript react app and added types for every necessary library. In this process, I encountered an issue with a file called HeatLayer.js, which is ...

Trigger the function when the keyboard event is deactivated

Is there a way to continuously run the top set interval whenever I lift my finger from the space key? When I try using the key up event, it only executes that function once. I'm not sure how to implement if/else logic when adding an event listener. se ...

What are some tips for utilizing markers that display location values in the format of a bar chart on Google Maps?

Hey there, I have a project in mind to create a Google map with markers representing specific locations and their values displayed as bar charts. Here is the code snippet from my index page: --index.html-- <!DOCTYPE html> <html> <head ...

How to Trigger a Django View Using Ajax

I am working on integrating Ajax with Django to trigger an action upon button click. I have successfully invoked the JavaScript function, but I am facing issues in calling the Django view. Despite no errors being displayed, the print statement within my vi ...

Utilizing JavaScript functions alongside a button within a Handlebars template

My handlebars project has the following structure: Project | +-- server.js +-- package.json +-- package-lock.json | +-- public | | | |-- css | | | + -- style.css | +-- views | | | |-- layouts | | | | | + -- main. ...

Show an item in a visual format of a list

Need help displaying a specific object: cars: { number': 1, 'overload': 1,'brand': {'0': {'porsche': [{'price': 10, 'id': 0}],'vw': [{'price': 20, 'id': 1}] ...

Use jQuery to refresh the jQuery sparkline chart after fetching data asynchronously

Background Utilizing the jquery.sparkline library to generate Pie Charts. The data for these charts is stored in an array. Upon initial page load, a web-service call is made (using .ajax) to fetch the data. The callback function associated with this call ...

Laravel and Vue: Retrieve complex data with multiple relationships

In my data model, I have a concept of Exercise which is linked to Topic, and Topic is associated with Subject. By using the code snippet below: Exercise::with('topic')->get() I can easily access the properties of the current topic within Vu ...