Nova Element Ui Laravel Package

Getting Started

1. Install the dependency. composer require nightkit/nova-element-ui then register the package's service provider in config/app.php (Nova 1.x predates the tool auto-discovery convention — don't assume it registers itself).
2. Read the repo before you require it. Check composer.json for the supported Nova constraint, then open resources/js/ and the compiled dist/ bundle. The .vue files there are your real API — there is no published docs site and the README is thin.
3. Confirm your Nova version. This package's last release was August 2018, the same month Nova 1.0 shipped. It targets Nova 1.x and Vue 2 / Element UI 2.x. Anything from Nova 4 onward (Vue 3) is out of scope.
4. First use case: a custom Nova Card. Scaffold a card with php artisan nova:card acme/stat-card, then import the Element components you need (el-card, el-progress, el-tag) into the card's resources/js/components/Card.vue instead of hand-rolling markup. That's the lowest-risk integration — a card is isolated, so Element's global CSS leaks less than it would inside a full tool or a resource index override.
5. Verify the build pipeline. Run npm install && npm run dev inside the package/card. If the bundle was committed as a pre-built dist/, you can serve it via Nova::script('nova-element-ui', __DIR__.'/dist/js/tool.js') in the provider's boot() and skip your own webpack step entirely.

Implementation Patterns

Serve the bundle from the package provider. The typical shape is a boot() that calls Nova::script() and Nova::style() with paths into dist/, and a tools()/cards() registration. Load it once globally rather than per-component so Element's CSS is fetched a single time.

Register components globally in your tool entrypoint. Because Nova mounts its own Vue root, the practical pattern is:

import { Button, Table, Dialog, Form, FormItem, Input } from 'element-ui'
Vue.component(Button.name, Button)
Vue.component(Table.name, Table)
// ...

Importing named components (rather than Vue.use(ElementUI)) keeps the bundle from doubling in size and avoids clobbering Nova's own registrations.

Use Element for data-dense screens. The package earns its keep on index-style tool pages: el-table with sorting/filtering beats hand-written tables for read-heavy admin views, and el-dialog + el-form gives you validated modals without pulling in another form library. Wrap every one of these in a scoped container class (e.g. .nova-element-scope) and reset within it.

Keep Nova's router as the source of truth. Don't let Element components own navigation. Element's el-menu is tempting for custom sidebars, but push routes through Nova's router-link/$router so breadcrumbs and the resource index stay consistent.

Integrate at the card/tool boundary, not inside Nova's core components. Overriding Index.vue or Detail.vue from Nova's vendor directory breaks on every composer update. Reach for cards, tools, and custom fields instead.

Pair with Laravel for data. The package is pure front-end; expose what Element tables/forms need via a small JSON endpoint in your tool's routes/api.php and hydrate props through the tool's Tool.vue.

Gotchas and Tips

• It is archived. No fixes will land. Treat this as vendored code: if you need a change, fork it and pin your fork in composer.json with a repositories VCS entry.
• Vue 2 only. Element UI 2.x does not run on Vue 3, so Nova 4+ is a hard stop. If you're on a modern Nova, this package is a non-starter — port the few components you actually use instead.
• Global CSS bleed is the #1 problem. Element ships opinionated resets (box-sizing, fonts, button styles) that will visibly break Nova's own UI. Always scope: import per-component styles (element-ui/lib/theme-chalk/button.css) rather than the full index.css, and add a container class guard.
• Bundle size. The full Element UI theme is several hundred KB of CSS plus a large JS payload injected into every Nova page. Import only what you use; verify with npm run production output before shipping.
• Double Vue instance trap. Nova's window.Vue and your tool's bundled Vue can diverge, producing "Unknown custom element: <el-...>". Fix by importing components from the same Vue your tool builds against, or expose the instance explicitly in your entrypoint.
• Debugging a missing style or component: check the network tab for the Nova::style/Nova::script URL first — a 404 there means the publish path or vendor:publish tag is wrong. Then confirm php artisan nova:publish was run after any dist/ rebuild.
• Clear caches after every asset change. php artisan nova:publish && php artisan view:clear saves a lot of "why is it still the old CSS" time.
• Extension points are CSS-first. Theme Element via SCSS variable overrides (element-theme) rather than patching component internals; the package exposes no JS config surface worth relying on.
• Don't build auth-sensitive flows on it. With zero dependents and no maintenance since 2018, treat it as a UI convenience layer only — keep authorization, validation, and mutations in Laravel.