Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jimmyhowedotcom's avatar

Not understanding how to create a Vue 3 package

I'm trying to extract a small tool I build inside a Laravel Inertia Vue application, into its own module so I can reuse it! See (https://laracasts.com/discuss/channels/code-review/best-approach-for-using-multiple-vue-apps-in-project) ...

The problem is I'm new to npm modules and packages. Ive managed to publish it, it's on npmjs.com ... But I cant seem to get it working inside my project! Its works from within the original project, but not when when I pull it into another project!

Here is my package.json:

{
    "name": "@jimmyhowedotcom/vue-simple-todo-tool",
    "private": false,
    "version": "0.1.9",
    "files": [
        "dist"
    ],
    "main": "dist/vue-simple-todo-tool.umd.js",
    "module": "dist/vue-simple-todo-tool.es.js",
    "exports": {
        ".": {
            "import": "./dist/vue-simple-todo-tool.es.js",
            "require": "./dist/vue-simple-todo-tool.umd.js"
        },
        "./dist/index.css": "./dist/index.css"
    },
    "scripts": {
        "dev": "vite",
        "build": "vue-tsc --noEmit && vite build",
        "preview": "vite preview",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook"
    },
    "dependencies": {
        "vue": "^3.2.25"
    },
    "devDependencies": {
        "@babel/core": "^7.18.6",
        "@storybook/addon-actions": "^6.5.9",
        "@storybook/addon-essentials": "^6.5.9",
        "@storybook/addon-interactions": "^6.5.9",
        "@storybook/addon-links": "^6.5.9",
        "@storybook/builder-vite": "^0.1.39",
        "@storybook/testing-library": "^0.0.13",
        "@storybook/vue3": "^6.5.9",
        "@tailwindcss/forms": "^0.5.2",
        "@vitejs/plugin-vue": "^2.3.3",
        "autoprefixer": "^10.4.7",
        "babel-loader": "^8.2.5",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.5",
        "typescript": "^4.5.4",
        "vite": "^2.9.9",
        "vue-loader": "^16.8.3",
        "vue-tsc": "^0.34.7"
    },
}

My App where it blows up:

import './bootstrap';
import '../css/app.css';
import '../js/darkmode.js';

import {createApp, h}                 from 'vue';
import {createInertiaApp, Head, Link} from '@inertiajs/inertia-vue3';
import {InertiaProgress}              from '@inertiajs/progress';
import {resolvePageComponent}         from 'laravel-vite-plugin/inertia-helpers';
import {ZiggyVue}                     from '../../vendor/tightenco/ziggy/dist/vue.m';
import {VueReCaptcha}                 from "vue-recaptcha-v3";
import VueSimpleTodoTool              from '@jimmyhowedotcom/vue-simple-todo-tool';

const appName = window.document.getElementsByTagName('title')[ 0 ]?.innerText || 'JimmyHowe.com';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin })
    {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .component('InertiaHead', Head)
            .component('InertiaLink', Link)
            .use(VueReCaptcha, {
                siteKey: '6Ldvz9wZAAAAADWv2G7nZpRvfKQEyPzEd8rb4BFO',
                loaderOptions: {
                    useRecaptchaNet: true,
                    autoHideBadge: true,
                },
            })
            .use(VueSimpleTodoTool)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#2d7bbb' });

Cleanly I dont understand how the module importing and exporting works, and how its all bundled together, so any help would be appreciated. I you need more code let me know...

The Error:

 [ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "@jimmyhowedotcom/vue-simple-todo-tool". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "@jimmyhowedotcom/vue-simple-todo-tool". The package may have incorrect main/module/exports specified in its package.json.

Thanks, Jimmy

PS: The code is here : https://github.com/JimmyHowe/vue-simple-todo-tool

0 likes
0 replies

Please or to participate in this conversation.