Registry / ui / vue-layer

vue-layer

library1.2.5jsnpmunverified

vue-layer is a Vue 2 component library for creating modal dialogs, alerts, confirmations, prompts, tooltips, and iframe-like layers, modeled after layui's layer plugin. Current stable version is 1.2.5, released on npm. It extends Vue prototype with $layer methods. Key differentiators: includes a custom iframe layer using Vue components instead of actual iframes, supports maximizable/minimizable windows, and provides simple API similar to layui. It is designed only for Vue 2 and requires manual CSS import. No major updates since 2019; maintenance status is low.

npm install vue-layer

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-LAYER

vue-layer

uijavascriptv1.2.5

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

layer

✓ import layer from 'vue-layer'

✗ const layer = require('vue-layer')

Default export is a function that must be called with Vue or options.

$layer

✓ Vue.prototype.$layer = layer(Vue)

✗ Vue.prototype.$layer = layer

layer is a factory; must invoke it with Vue instance or options object.

CSS

✓ import 'vue-layer/lib/vue-layer.css'

✗ import 'vue-layer/dist/vue-layer.css'

CSS file is in lib/, not dist/. Required for all components.

Shows how to install vue-layer as a plugin and display a simple alert dialog.

import Vue from 'vue'; import layer from 'vue-layer'; import 'vue-layer/lib/vue-layer.css'; // Install plugin Vue.prototype.$layer = layer(Vue); // Use in component: export default { mounted() { this.$layer.alert('Hello from vue-layer!'); } }

Debug

Known issues

breakingVue.prototype.$layer = layer(Vue) is required; cannot call layer directly.

fix

Always use Vue.prototype.$layer = layer(Vue) in entry file.

affects: >=1.0.0

deprecatedPackage not updated since 2019; no Vue 3 support.

fix

Use alternatives like element-ui or ant-design-vue for Vue 3.

affects: >=1.0.0

gotchalayer.iframe uses Vue components, not real iframes. Cannot load external URLs.

fix

For external URLs, use a different library or native iframe.

affects: >=1.0.0

gotchaCSS must be imported separately; not bundled.

fix

Add import 'vue-layer/lib/vue-layer.css' in your entry file.

affects: >=1.0.0

gotchalayer.prompt with formType requires correct type numbers: 1=text, 2=password, 3=textarea.

fix

Use formType: 1, 2, or 3 when calling layer.prompt.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading '$layer')

$layer is not attached to Vue prototype.

fix

Ensure Vue.prototype.$layer = layer(Vue) is called before any component uses $layer.

Unknown custom element: <vue-layer> - did you register the component correctly?

Incorrect import or missing CSS; components are used via $layer methods, not tags.

fix

Use this.$layer.alert() instead of <layer> tags.

Failed to resolve component: editForm

Using layer.iframe with content from a component that is not registered locally or globally.

fix

Register the component in the parent component's components option.

Module not found: Error: Can't resolve 'vue-layer/lib/vue-layer.css'

Incorrect CSS path or missing file in node_modules.

fix

Use path: 'vue-layer/lib/vue-layer.css' (note: 'lib' not 'dist').

Upgrade

Version history

1.2.5latest on npm

Audit

Dependencies

vuerequiredpeer dependency: requires Vue 2.x

Agent activity

21 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/zuoyanart/vue-layer ↗

packagevue-layer ↗

homepagehttps://github.com/zuoyanart/vue-layer#readme ↗