Vue 3

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/FUNDING.yml

@@ -1 +1 @@
-github: euvl
+github: febe95

.gitignore

@@ -4,5 +4,6 @@
 *.map
 node_modules/
 npm-debug.log
-demo/dist/*
 docs/.vuepress/dist
+docs/.vuepress/.cache
+docs/.vuepress/.temp

.npmrc

@@ -0,0 +1 @@
+lockfile-version=1

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Yev Vlasenko
+Copyright (c) 2025 Felix Bernhard
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,56 +1,38 @@
 <p align="center">
 
-# Vue.js modal
+# Vue.js modal (Vue 3)
 
 Easy to use, highly customizable Vue.js modal library.
 
+> [!NOTE]
+> This is a fork of the original [`vue-js-modal`](https://github.com/euvl/vue-js-modal) by [euvl](https://github.com/euvl).
+> The fork is based on the 2.0.1 branch. The `master` branch contains some new but broken functionality (slots in dynamic modals).
+
 ### 😎 [Examples](http://vue-js-modal.yev.io/)
 
 ### 🤓 [Documentation](https://euvl.github.io/vue-js-modal/)
 
-### 🤖 [Changelog](https://github.com/euvl/vue-js-modal/releases/tag/2.0.0-rc4)
-
-### 🙌 [Looking for maintainers](https://github.com/euvl/vue-js-modal/issues/588)
+### 🤖 [Changelog](https://github.com/febe95/vue-js-modal/releases/)
 
-### 💰 [Sponsorship](https://github.com/sponsors/euvl)
+### 💰 [Sponsorship](https://github.com/sponsors/febe95))
 
 [![npm version](https://badge.fury.io/js/vue-js-modal.svg)](https://badge.fury.io/js/vue-js-modal)
 [![npm](https://img.shields.io/npm/dm/vue-js-modal.svg)](https://www.npmjs.com/package/vue-js-modal)
 [![npm](https://img.shields.io/npm/dt/vue-js-modal.svg)](https://www.npmjs.com/package/vue-js-modal)
 
-# ⚠️⚠️⚠️ 2.0.0-rc.X version:
-
-Version 2.0.0 release candidates will have breaking changes until it is 2.0.1. If you need a more stable version, please use 1.3.34.
-
-If you notice any bugs or regressings please do not hesitate to report any issues.
-
-<p align="right">
-  <a href="https://www.buymeacoffee.com/yev" target="_blank">
-  <img width="200" alt="screen shot 2018-03-01 at 10 33 39" src="https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png">
-  </a>
-</p>
-
 <p align="center">
   <img src="https://media.giphy.com/media/3oKIPco1eNxAA1rD4Q/giphy.gif">
 </p>
 
 ---
 
-# Sponsorship & support
-
-**If you are using this project please consider sponsoring it's further development & bug fixes**
-
-Links: https://github.com/sponsors/euvl, https://www.buymeacoffee.com/yev
-
 ## This library is contributor-driven
 
 **This library is contributor-driven**. It is not backed by any company, which means that all contributions are voluntary and done by the people who need them. If you need something improved, added, or fixed, please contribute it yourself. Please keep in mind that maintainers volunteer their free time to work on this project and have no obligation to reply on the issues, tailor library for specific use-cases or perform customer support.
 
-## Other projects
-
-Check out my other projects:
+## Vue 3 Compatibility
 
-- https://github.com/euvl/vue-notification
-- https://github.com/euvl/vue-js-toggle-button
-- https://github.com/euvl/vue-js-popover
-- https://github.com/euvl/v-clipboard
+- ✅ Main Package
+- ✅ Demo
+- ❌ Docs
+- ❌ SSR examples (Nuxt)

babel.config.js

@@ -4,6 +4,7 @@ module.exports = function(babel) {
   return {
     presets: ['@babel/preset-env'],
     plugins: [
+      '@babel/plugin-proposal-nullish-coalescing-operator',
       '@babel/plugin-proposal-object-rest-spread',
       '@babel/plugin-proposal-optional-chaining'
     ]

config/webpack.base-no-css.config.js

@@ -0,0 +1,31 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { mergeWithRules } = require('webpack-merge')
+const base = require('./webpack.base.config')
+
+const mergeRules = {
+  module: {
+    rules: {
+      test: 'match',
+      use: 'replace'
+    }
+  }
+}
+
+/** @type {import('webpack').Configuration} */
+const webpackConfig = mergeWithRules(mergeRules)(base, {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'styles.css'
+    })
+  ]
+})
+
+module.exports = webpackConfig

build/webpack.base.config.js → config/webpack.base.config.js

@@ -1,34 +1,43 @@
 const path = require('path')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const { VueLoaderPlugin } = require('vue-loader')
 
-module.exports = {
+/** @type {import('webpack').Configuration} */
+const webpackConfig = {
   mode: 'production',
+  target: 'web',
   entry: path.resolve(__dirname, '../src/index.js'),
   devtool: 'source-map',
+  experiments: {
+    outputModule: false
+  },
   output: {
-    library: 'vue-js-modal',
-    libraryTarget: 'umd',
+    library: {
+      name: 'vue-js-modal',
+      type: 'umd'
+    },
+    filename: 'dummy.js', // will be overwritten by the other webpack config implementations
     path: path.resolve(__dirname, '../dist'),
     publicPath: '/dist/'
   },
+  externals: {
+    vue: 'vue'
+  },
   resolve: {
     extensions: ['.ts', '.js']
   },
   optimization: {
     minimizer: [
-      new UglifyJsPlugin({
-        cache: true,
+      new TerserPlugin({
+        extractComments: false,
         parallel: true,
-        sourceMap: true
-        // compress: {
-        //   pure_funcs: ['console.log']
-        // }
+        terserOptions: {
+          module: false,
+          sourceMap: true
+        }
       }),
-      new OptimizeCSSAssetsPlugin({
-        canPrint: true
-      })
+      new CssMinimizerPlugin()
     ]
   },
   module: {
@@ -58,3 +67,5 @@ module.exports = {
   },
   plugins: [new VueLoaderPlugin()]
 }
+
+module.exports = webpackConfig

config/webpack.client-no-css.config.js

@@ -0,0 +1,11 @@
+const { merge } = require('webpack-merge')
+const baseNoCss = require('./webpack.base-no-css.config')
+
+/** @type {import('webpack').Configuration} */
+const webpackConfig = merge(baseNoCss, {
+  output: {
+    filename: 'index.nocss.js'
+  }
+})
+
+module.exports = webpackConfig

config/webpack.client.config.js

@@ -0,0 +1,11 @@
+const { merge } = require('webpack-merge')
+const base = require('./webpack.base.config')
+
+/** @type {import('webpack').Configuration} */
+const webpackConfig = merge(base, {
+  output: {
+    filename: 'index.js'
+  }
+})
+
+module.exports = webpackConfig