Laravel Attachments Vue Frontend

Vue frontend components for the Laravel Attachments media UI, packaged for npm.

• Vue components in src/components
• Shared mixins in src/mixins
• SCSS styles in src/styles
• A Vue plugin entrypoint in src/plugin.js
• A library build entrypoint in src/index.js

Install

npm install @dcodegroup/laravel-attachments-vue

The package expects Vue 3 to be installed by the consuming application.

Usage

Register the plugin and import the bundled styles in your application entry file:

import { createApp } from "vue";
import attachmentPlugin from "@dcodegroup/laravel-attachments-vue";
import "@dcodegroup/laravel-attachments-vue/style.css";

const app = createApp({});

app.use(attachmentPlugin, {
  media: {
    words: {
      home: "Home",
      title: "Attachments",
      select_existing: "Select existing",
    },
    headings: {
      model: "Model",
      parent: "Parent",
    },
    table: {
      headings: {
        details: "Details",
        category: "Category",
        title: "Title",
        alt_text: "Alt text",
        size: "Size",
        uploaded_by: "Uploaded by",
        created_at: "Created at",
        select_existing: "Select existing",
      },
    },
  },
});

app.mount("#app");

The plugin globally registers the Attachments component.

<template>
  <Attachments
    :model="model"
    model-class="App\\Models\\Post"
    upload-endpoint="/frontend/admin/media/upload"
    model-existing-endpoint="/frontend/admin/media/existing"
    category-options-endpoint="/frontend/admin/category/options"
    categories-endpoint="/frontend/admin/category/options"
  />
</template>

You can also import individual components:

import { Attachments, MediaList, Upload } from "@dcodegroup/laravel-attachments-vue";

Runtime expectations

These components are frontend-only and do not include the Laravel routes, controllers, models, migrations, config, views, or translations from the original Composer package.

The consuming application must provide:

• Backend API endpoints that match the component props you configure.
• A global axios instance for API requests.
• A global lodash-compatible _ instance for the existing helper calls in the components.
• Translation options passed to app.use(attachmentPlugin, translations) for strings accessed through $t().

Styles

Import the built CSS:

import "@dcodegroup/laravel-attachments-vue/style.css";

Or import the SCSS source if your build pipeline compiles Sass:

@import "@dcodegroup/laravel-attachments-vue/scss";

Development

Install dependencies:

npm install

Run linting:

npm run lint

Build the npm package artifacts:

npm run build

The Vite library build emits ESM, UMD, and CSS artifacts to dist/.