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
Please or to participate in this conversation.