DEV Community: nebojsa91markovic

React got me hired, Vue made me better

nebojsa91markovic — Tue, 13 May 2025 15:07:36 +0000

When I started learning FE, I began with React - like many others. It's the most popular library, and if you search for job opportunities there are abundant. And at that stage, you should have only one goal/priority, getting hired and gaining experience. So it's only reasonable to start with React.

I learned React through class component, and yes, they are deprecated. But understanding gave me deeper grasp of how React works under the hood (lifecycle methods, binding, rendering).

Eventually, I landed my first job working on Vue project. It wasn't a conscious shift, but it was a opportunity. Over time I came to appreciate Vue, and while writing this, I feel like a need to promote it. Especially through lens of someone who also mentored new developers in React, on bootcamp. Explaining React concepts to beginners while growing as a developer on Vue projects on my daily job gave me great reflection on both tools.

Vue Feels More Intuitive

First what I would point out is that Vue's design is intuitive. You don't need to adopt a specific knowledge or architecture to be productive, Vue just works. Option API provides clear structure (data, props, methods, computed, watchers)
I would say this separation helps writing more readable and maintainable code.

Vue 3 introuduced Composition API which gives even more flexibility and control, especially for complex logic. It's clean, modular. I would say Vue really evolved and scaled based on developers needs, while keeping being intuitive.

Less boilerplace, more clarity

Vue gives you build-in directives like:
v-if, v-else, v-for v-bind, v-on, v-model

You don't have to manage conditional rendering or loops using JSX syntax and ternary operators, that can get messy very quickly in React. Writing templates feels like writing HTML, which is easier for newcomers and more readable.
Vue gives v-model for two-way data binding. And if you need to build reusable logic like tooltip or tracking behavior, Vue supports custom directives which are easy to implement.

Vue is a framework (not just a library)

One of the big differences is that Vue is a framework, not UI library like React (probably heard this thousands of times). But what that means is that Vue is well integrated ecosystem.

Vue Router for navigation
Vuex (Vue 2) or Pinia (Vue 3) for state management
Transitions and animations built-in
Built-in reactivity that lets you track dependencies without extra code

Vue router, Vuex and Pinia are official packages maintained by Vue team, designed to work smoothly together

In React, you need to install third party libraries for all of these:

React Router
Redux, Zustand, Recoil, MobX...
React Spring, Framer Motion
Redux-Thunk, Redux-Saga for side effects

Growing as a developer means thing about maintenance

When you're junior, you want to get thing working, that's it. But as you gain experience, you start thinking about

How to keep your app lightweight?
How many packages do you depend on?
How often do you check npm outdated?
How maintainable is your code?

Don't get me wrong, you can handle all of this in React as well! But what I mean by this is that React gives you many options, but with 'great freedom comes great risk'. Without clear patterns or experienced leads, developers can write code that's inconsistent and hard to manage. Vue, on the other hand, makes it easier to write consistent, readable code.

Bundlers and developer experience

Vue's ecosystem also simplify tooling too. Vue CLI is still around, but the community has moved to Vite a light fast bundler created by the author of Vue himself.

Vite supports Instant startup, HMR, native ES module support, tree shaking...
It just works, you don't need to overengineer with Webpack configs and Babel plugins.

React, used to rely on CRA (officially deprecated), these days, the React team recommends using tools like Vite because of speed and simplicity. But it’s worth mentioning that Vite was originally built by Vue’s creator, Evan You, and while it supports React, it’s natively optimized for Vue projects.
Next.js is another popular option, but it comes with more abstraction and configuration overhead unless you know exactly what you're doing.

Tree shaking

Vue 3 is designed with tree shaking in mind. It's modular. You import only what you need, and you bundler removes the rest. Even Vue router and PInia are tree shakable.

React not so much. Many React libraries aren't tree shakable at all. That means your bundle can include a lot of unused code, unless you don't make extra effort.

Conclusion

Vue is not perfect. React has a massive ecosystem and huge community. If you are starting out, React is still a great choice. But as someone who's worked with both, I find Vue to be more productive, more redable and easier to maintain.

When company chooses React just because it's popular, they might just think about saving on hiring costs. But without good architectural guidance, the long term cost can be high. With Vue, it's easier to onboard new developers, establish consistent patterns, and focus on scaling you application and building features.

Vue deserves more attention not just from beginners, but from teams and companies who value clean, maintainable and productive development.

If you haven't tried Vue, I would strongly suggest, give it a change. You might end up loving it! :)

Integrating Typeform into Your Application: A Guide with Vanilla JavaScript, React, and Vue.js

nebojsa91markovic — Sun, 17 Mar 2024 09:26:55 +0000

Typeform provides a seamless way to create and embed interactive forms, surveys, quizzes, and more into your web applications. Whether you're building a personal website, a business portal, or an e-commerce platform, integrating Typeform can enhance user engagement and streamline data collection. In this guide, we'll explore how to add Typeform to your application using vanilla JavaScript, React, and Vue.js.

Vanilla JavaScript Integration

First, let's start with a simple implementation using vanilla JavaScript. Below is a code snippet demonstrating how to dynamically load Typeform's embed script and initialize a slider popup when a button is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="typeform-container"></div>
    <button id="startTfContainer">Start</button>
    <script src="index.js"></script>
</body>
</html>

When integrating Typeform into your web application, you might want to trigger the form's display as soon as your script loads. This is achievable by creating and opening a Typeform popover form. In your JavaScript file, you can implement this functionality with just a few lines of code.

// Define the showTF function
const showTF = () => {
  // Load Typeform embed.js script dynamically
  const script = document.createElement("script");
  script.src = "//embed.typeform.com/next/embed.js";
  script.async = true;
  document.head.appendChild(script);

  // Load Typeform slider CSS
  const cssLink = document.createElement("link");
  cssLink.setAttribute("rel", "stylesheet");
  cssLink.setAttribute("href", "embed.typeform.com/next/css/slider.css");
  document.head.appendChild(cssLink);

  // Wait for the script to load and then initialize the Typeform popup
script.onload = () => {
  const container = document.getElementById("typeform-container");
  const { open } = window.tf.createPopover("formId", {
    container,
    onReady: ({ formId }) => {
      console.log(`Form ${formId} is ready`);
      window.tf.load();
    }
  });
  open();
};

// Get the button element by its id
const startButton = document.getElementById("startTfContainer");

// Add an event listener to the button
startButton.addEventListener("click", showTF);

Following this, there are also events that we can utilize to enhance the interaction and functionality of our Typeform. Let's delve deeper into how we can handle these events to tailor the form behavior to our specific requirements.

const { close } = window.tf.createPopover("formId", {
  // Event handlers
  onQuestionChanged: ({ formId, ref }) => {
    console.log(`Question in form ${formId} changed to ${ref}`);
  },
  onHeightChanged: ({ formId, ref, height }) => {
    console.log(
      `Question ${ref} in form ${formId} has height ${height}px now`
    );
  },
  onSubmit: ({ formId, responseId }) => {
    console.log(`Form ${formId} submitted, response id: ${responseId}`);
    // Log a message 1500 milliseconds after form submission.
    setTimeout(() => {
      console.log("1500 milliseconds after form submission");
    }, 1500);
    // To retrieve the response, use `responseId` (you have to do it server-side)
    // More details: https://developer.typeform.com/responses/
  },
  onClose: (formId) => {
    console.log(`Modal window with form ${formId} was closed`);
  }
});

React Integration

In a React application, you can create a reusable component to handle Typeform integration. Here's how you can achieve that:

const TfComponent = () => {
  const showTf = () => {
    // Similar code as vanilla JavaScript implementation
  };

  return (
    <>
      <div id="typeform-container"></div>
      <button id="startTfContainer" onClick={showTf}>
        Start
      </button>
    </>
  );
};

export default TfComponent;

Vue.js Integration

Similarly, in a Vue.js application, you can create a component to integrate Typeform:

<template>
  <div id="app">
    <button @click="showTf">Show Typeform</button>
  </div>
</template>

<script>
export default {
  methods: {
    showTf() {
      // Similar code as vanilla JavaScript implementation
    }
  }
};
</script>

Exploring Typeform Embed Options and Features

Now that we've covered the basics of integrating Typeform into our applications using vanilla JavaScript, let's explore the diverse range of embedding options and additional features that Typeform offers.
When we import the "//embed.typeform.com/next/css/slider.css" file, we're essentially importing the CSS file responsible for styling the slider component and defining how it will appear to the user. This is why we utilize the createSlider method on the window object:

window.tf.createSlider("formId", {
  container,
});

You have the flexibility to embed Typeform in a modal window, which is typically displayed over your website and is usually triggered by user actions such as clicking a button. There are several modal embed options provided by Typeform:

Popup
Slider
Sidetab
Popover

In addition to these modal embed options, Typeform provides us with some other useful features:

popover.css and createPopover
sidetab.css and createSidetab
slider.css and createSlider
popup.css and createPopup

These options allow for versatile integration of Typeform into your application, providing a seamless and interactive experience for your users. Whether you opt for a slider, popover, sidetab, or popup modal, Typeform offers the tools to enhance user engagement and streamline data collection within your web application.

Customizing Typeform Integration: Styling and Container Control

Now that we've implemented the Typeform survey into our custom dialog, let's explore some further customization options. Typeform provides flexibility in styling, allowing us to integrate their forms seamlessly into our applications while maintaining our own design aesthetics.

For instance, we might have a specific layout requirement or prefer to use our own styling for the Typeform survey. In such cases, we can create a custom element on our webpage, such as a dialog, and apply the Typeform survey within it.

To ensure that the Typeform survey fits neatly into our custom dialog and adheres to our styling preferences, we need to apply the appropriate CSS classes. Also skip setting up css from 'embed.typeform.com'
Here's an example of how we can achieve this:

.typeform-container {
  height: inherit !important;
  width: inherit !important;
}

.tf-v1-widget,
.tf-v1-iframe-wrapper,
.tf-v1-popup,
iframe {
  height: inherit !important;
  width: inherit !important;
}

By applying the .typeform-container class to the specific element where we want to display the Typeform survey, we ensure that it maintains the correct dimensions within our custom dialog. Additionally, the CSS rules provided help handle the size of the components generated by Typeform, ensuring they inherit the dimensions of their parent container.

This level of customization allows us to seamlessly integrate Typeform surveys into our applications while maintaining control over their appearance and layout. Whether it's within a custom dialog, a dedicated section of a webpage, or any other element, Typeform's flexibility empowers us to create engaging user experiences that align with our design preferences.

Utilizing event listeners and configurations from window.tf.create, we can dynamically handle components, emit events, and ensure a seamless user experience. For example, by triggering this.$emit('close') on both onSubmit and onClose, or by accessing the close function during the unmounting lifecycle, we maintain control over the Typeform survey's behavior while enhancing its integration into our application.

Considerations on NPM Package Installation

While there's an NPM package available for Typeform (@typeform/embed), it's essential to consider whether installing the package is necessary for your project. Depending on the level of integration and usage, you may opt for the lightweight approach demonstrated here. For a deeper exploration of when to consider installing the NPM package for Typeform integration, refer to this article for more insights.

Integrating Typeform into your application can enhance user interaction and streamline data collection. Whether you choose to implement it with vanilla JavaScript or leverage frameworks like React and Vue.js, the process remains straightforward and flexible.

Now that you have the tools at your disposal, go ahead and elevate your web applications with interactive Typeform forms!

Conclusion:

Thank you for exploring the integration of Typeform into web applications with me. I encourage you to share your experiences, insights, and any questions you have about integrating Typeform into your projects in the comments section below.

If you're looking to further enhance your understanding or explore additional resources on Typeform integration, feel free to check out the official Typeform documentation or community forums.

Your engagement and contributions are greatly appreciated as we continue to learn and grow together in our development journey. Happy coding!

Making Informed Decisions: When to Utilize npm Packages in Frontend Development

nebojsa91markovic — Tue, 12 Mar 2024 20:14:06 +0000

Introduction:

Frontend development has undergone a remarkable transformation with the widespread adoption of npm packages. These packages, readily available through the Node Package Manager (npm), offer a wealth of tools, libraries, and utilities that empower developers to build robust and feature-rich web applications. However, the decision to incorporate npm packages into a project should not be taken lightly. It's essential to make informed decisions, considering factors such as functionality, dependencies, maintenance, package size, and usage frequency. Let's delve into the importance of npm packages in frontend development and highlight the significance of strategic decision-making in their utilization.

Understanding the Role of npm Packages:

npm packages serve as building blocks for frontend development, providing pre-written code modules that can be easily integrated into projects. They encompass a wide range of functionalities, including UI components, state management solutions, data fetching utilities, and much more. By leveraging npm packages, developers can harness the power of code reusability, accelerate development workflows, and tap into community-driven solutions. These packages not only expedite the development process but also contribute to code quality and maintainability through standardized solutions and best practices.

Factors to Consider Before Adding npm Packages:

Functionality and Requirements:

Before adding an npm package to your project, it's crucial to assess whether it offers essential functionality that cannot be readily achieved using vanilla JavaScript or existing libraries. Consider whether the package aligns with the specific needs and requirements of your project, ensuring that its inclusion enhances rather than complicates your development process.

Dependency Analysis:

Evaluate the dependencies of the npm package to ensure they are well-maintained, up-to-date, and secure. Adding additional dependencies introduces potential points of failure and increases the complexity of your project's ecosystem. Therefore, it's essential to scrutinize the dependencies of npm packages and prioritize those with a healthy maintenance status and minimal external dependencies.

npm view neo-async dependencies

Package Maintenance:

Investigate the maintenance status of the npm package by examining its GitHub repository, release history, and community activity. Favor packages that are actively maintained and regularly updated to mitigate the risk of encountering issues or vulnerabilities. By choosing well-maintained packages, you ensure the long-term stability and reliability of your project.

Package Size:

Consider the size of the npm package and its impact on the performance and load times of your application. While npm packages offer valuable functionality, their inclusion can contribute to increased bundle size and slower load times, particularly in resource-constrained environments. Evaluate whether the benefits of the package justify its size, prioritizing lightweight alternatives where possible.

Usage Frequency:

Determine the frequency and extent to which the npm package will be utilized within your application. Avoid adding unnecessary packages that contribute to code bloat and increase maintenance overhead. Instead, prioritize packages that align with your project's core functionalities and are integral to its development.

Best Practices for Utilizing npm Packages in Frontend Frameworks

In the ever-evolving landscape of frontend development, leveraging npm packages has become indispensable for developers seeking to streamline their workflows and deliver robust applications efficiently. However, choosing and utilizing these packages effectively requires a nuanced approach. Here are some best practices to consider:

1. Choose npm packages that seamlessly integrate with the framework and follow its conventions and patterns:
Select npm packages that are specifically designed to work well with the chosen frontend framework. These packages should follow the coding conventions, patterns, and architectural principles of the framework to ensure seamless integration and optimal performance.

Example:

For React: Choose packages like Material-UI or Ant Design for UI components, and Redux or React Context API for state management.
For Vue.js: Opt for libraries like Vuetify or Element UI for UI components, and Vuex for state management.
For Angular: Consider packages such as Angular Material for UI components, and NgRx for state management.

2. Utilize npm packages for common tasks such as UI component libraries, state management solutions, and data fetching utilities to expedite development and maintain consistency:

Leverage npm packages to streamline common tasks such as managing state, handling HTTP requests, and implementing UI components. By utilizing established npm packages for these tasks, developers can accelerate development, maintain consistency across projects, and benefit from community-driven solutions.

Example:

For React: Utilize packages like Axios for HTTP requests, Redux for state management, and Material-UI for UI components.
For Vue.js: Consider using Axios for HTTP requests, Vuex for state management, and Vuetify for UI components.
For Angular: Explore packages such as HttpClient for HTTP requests, NgRx for state management, and Angular Material for UI components.

// For React
import React from 'react';
import axios from 'axios';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './App';
import rootReducer from './reducers';

const store = createStore(rootReducer);

function MainApp() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

// For Vue.js
import { createApp } from 'vue';
import axios from 'axios';
import { createStore } from 'vuex';
import App from './App.vue';
import store from './store';

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

app.mount('#app');


// For Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { AppComponent } from './app.component';
import { reducers } from './reducers';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    StoreModule.forRoot(reducers)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Be mindful of the potential conflicts between npm packages and ensure compatibility with other dependencies in your project:

Pay attention to potential conflicts between npm packages and other dependencies used in the project. Ensure compatibility between npm packages and other libraries or frameworks to prevent conflicts that could disrupt the functionality of the application.

Example:

Verify that npm packages used in a React project are compatible with React's ecosystem, including other libraries like Redux or React Router.
Similarly, ensure that npm packages integrated into a Vue.js project are compatible with Vue's ecosystem, such as Vuex or Vue Router.
For Angular projects, confirm compatibility between npm packages and Angular's ecosystem, including modules like HttpClient or Angular Material.

4. Regularly update npm packages to leverage new features, bug fixes, and security patches while staying vigilant for breaking changes that may require adjustments to your codebase:

Keep npm packages up-to-date to benefit from new features, bug fixes, and security patches. However, remain vigilant for breaking changes that could affect the compatibility or functionality of the application, and be prepared to make necessary adjustments to the codebase accordingly.

Example:

Stay updated with the latest releases of npm packages used in React projects, ensuring compatibility with new features introduced in React versions.
Similarly, maintain awareness of updates to npm packages integrated into Vue.js projects to leverage improvements and enhancements while addressing any breaking changes in Vue.js releases.
For Angular projects, regularly review updates to npm packages to capitalize on new features and bug fixes, while addressing any compatibility issues with Angular updates.

By adhering to these best practices, frontend developers can effectively leverage npm packages to enhance their development workflows, improve application functionality, and ensure long-term maintainability across various frontend frameworks.

WeAreDevelopers IT Conference in Berlin: A Memorable Experience and Valuable Insights

nebojsa91markovic — Tue, 01 Aug 2023 09:19:19 +0000

Introduction:

I recently had the opportunity to attend the WeAreDevelopers IT Conference in Berlin, and it turned out to be an unforgettable experience. As my first large-scale conference, I wasn't entirely sure what to expect. However, from the moment I arrived, I was pleasantly surprised by the positive and vibrant atmosphere that awaited me.

Preparation and Expectations:

Leading up to the conference, I received an email from the WeAreDevelopers team, providing access to an app that contained the entire program, including workshops, talks, and speeches. I eagerly sorted through the diverse array of topics, marking those of my interest to attend. Little did I know that the conference would offer much more than just tech-related content.

The Conference Experience:

Upon arriving at the conference center, I was met with a lively ambiance, filled with music, food stands, and friendly volunteers ready to assist. The opening ceremony emphasized the importance of networking, which proved to be one of the most valuable aspects of the event.

Networking Opportunities:

With a packed schedule, attending every speech became impossible. Instead, I found myself easily distracted by the fascinating exhibits, ranging from innovative companies and coding challenges to virtual reality experiences. It was during these interactions that networking naturally occurred. Engaging in conversations with like-minded individuals and representatives from various companies allowed me to gain insights into their work and potential career opportunities.

John Romero's Speech:

I also had the pleasure of attending John Romero's speech, the creator of the legendary game DOOM. It was a fantastic experience to see and hear him speak about a game that many of us grew up playing. John's personality shone through as he walked us through the development phases of DOOM, a groundbreaking game that was originally released in 1993 for DOS with a "huge file size" of 2.39 MB. Witnessing the behind-the-scenes process was truly fascinating, and I couldn't resist getting his autographed book and engaging in a brief conversation with him.

Key Takeaways and Emerging Trends:

Throughout the conference, I immersed myself in discussions about the future of technology, with a special focus on artificial intelligence (AI). Hearing top industry experts share their opinions on AI and its potential applications provided valuable perspectives and a glimpse into the direction IT is heading. One concept that caught my attention was "decentralized identity and data storage for applications," which seems to be the next big trend.

During the event, I also discovered an intriguing project called Web5. If you're curious about the future of the web, I highly recommend checking out Web5 and exploring their GitHub repository, which is currently in the tech preview stage. You can find more information about it at https://github.com/TBD54566975/web5-js. This project seems to hold promise and could potentially shape the next generation of web technologies.

Tips for Making the Most of the Conference:

Plan Ahead: Prioritize "must attend" speakers and sessions to ensure you don't miss out on the most relevant content.
Utilize the Conference App: The conference app and Wi-Fi access are invaluable resources for staying updated on live events and program changes.
Embrace Networking: Approach companies and individuals that interest you, strike up conversations, and express genuine curiosity about their work.
Stay Open-Minded: While attending talks is essential, don't hesitate to explore the various exhibits and experiences the conference offers.
Join the Official WeAreDevelopers Party: The official after-party provides an excellent opportunity to unwind, network further, and make lasting connections.

Conclusion:

The WeAreDevelopers IT Conference in Berlin not only delivered captivating talks and workshops but also provided an opportunity to connect with industry leaders like John Romero, Tim Berners-Lee. The inclusion of "Fireside chat" sessions added depth to the event, allowing attendees to engage in thought-provoking discussions with prominent figures in the tech industry. I left the conference with a renewed passion for technology, armed with fresh insights, and excited to explore the emerging trends that could shape the future of IT. I look forward to attending more conferences in the future and continuing my journey of learning and networking in the tech world.

Fixing the MIME Type Error When Deploying Storybook with Vue3 and Vite

nebojsa91markovic — Tue, 14 Mar 2023 10:49:18 +0000

I recently migrated a project from Vue2 + Webpack + Storybook 6.4 to Vue3 + Vite + Storybook 7.0.0-beta. After the migration, I encountered an issue where my Storybook deployment failed, and I received the following error in the console:

"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec."

After some investigation, I determined that the problem had to do with how ViteFinal in the main.ts file in .storybook was resolving extensions when merging Config.

Here's an example of how your main.ts in storybook subfolder could look like:

import type { StorybookConfig } from '@storybook/vue3-vite'
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {}
  },
  core: {
    builder: "@storybook/builder-vite",
  },
  docs: {
    autodocs: 'tag'
  }
}
export default config

And here are the extensions in my vite.config.ts:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "./src/styles/_animations.scss";
          @import "./src/styles/_variables.scss";
          @import "./src/styles/_mixins.scss";
          @import "./src/styles/_helpers.scss";
        `,
      },
    },
  },
  plugins: [
    vue(),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
  },
  test: {
    environment: 'jsdom',
    deps: {
      inline: true,
    },
  },
});

To fix the issue, I added the following code to my Web.config file:

<system.webServer>
   <staticContent>
      <mimeMap fileExtension=".mjs" mimeType="text/javascript" />
   </staticContent>
</system.webServer>

However, this gave me an error 500. After further research, I found an answer provided by Eric Barr on another Stack Overflow question which explained that IIS 8 and above are duplicating the mimeType. To fix this, I removed and then added the mimeType as shown below:

<system.webServer>
   <staticContent>
      <remove fileExtension=".mjs" /> 
      <mimeMap fileExtension=".mjs" mimeType="text/javascript" />
   </staticContent>
</system.webServer>

For those who are not familiar with MIME types, they are a standard way to indicate the type of content that is being served by a web server. Common MIME types include text/html, text/css, and application/json, among others.

In summary, if you encounter the "Failed to load module script" error when deploying Storybook using Vite, check that your MIME types are set up correctly and make sure to remove and then add the mimeType when working with IIS 8 and above.

I hope this article helps others who may encounter a similar issue!

By following these steps, you should be able to fix the MIME type error and successfully deploy Storybook with Vue3 and Vite. If you encounter any issues or have any questions, feel free to leave a comment below.