How can I use common npm packages in Vue Ionic

Hello, I’m new using Ionic Vue.

In Vue projects, I use packages like vue-moment, and I import it to my app.js like this:

const moment = require('moment')
import VueMoment from 'vue-moment'
Vue.use(VueMoment, {
    moment
});

How can I use this in Ionic Vue? I try it in the main.ts, but it show me a lot of errors:

[vue-cli-service] TS7016: Could not find a declaration file for module 'element-ui/lib/locale'. '/Users/marc/Documents/projects/cuanto-cuesta-mi-web-web-app/node_modules/element-ui/lib/locale/index.js' implicitly has an 'any' type.
[vue-cli-service]   Try `npm install @types/element-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'element-ui/lib/locale';`
[vue-cli-service]     39 | import esLocale from 'element-ui/lib/locale/lang/es';
[vue-cli-service]     40 | import caLocale from 'element-ui/lib/locale/lang/ca';
[vue-cli-service]   > 41 | import locale from 'element-ui/lib/locale'
[vue-cli-service]        |                    ^^^^^^^^^^^^^^^^^^^^^^^
[vue-cli-service]     42 |
[vue-cli-service]     43 |
[vue-cli-service]     44 | require('moment/locale/es')
[vue-cli-service] ERROR in src/main.ts:45:10
[vue-cli-service] TS2339: Property 'moment' does not exist on type 'Plugin_2'.
[vue-cli-service]   Property 'moment' does not exist on type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }'.
[vue-cli-service]     43 |
[vue-cli-service]     44 | require('moment/locale/es')
[vue-cli-service]   > 45 | IonicVue.moment().locale(lang)
[vue-cli-service]        |          ^^^^^^
[vue-cli-service]     46 |
[vue-cli-service]     47 |
[vue-cli-service]     48 | const app = createApp(App)
[vue-cli-service] ERROR in src/main.ts:45:26
[vue-cli-service] TS2304: Cannot find name 'lang'.
[vue-cli-service]     43 |
[vue-cli-service]     44 | require('moment/locale/es')
[vue-cli-service]   > 45 | IonicVue.moment().locale(lang)
[vue-cli-service]        |                          ^^^^
[vue-cli-service]     46 |
[vue-cli-service]     47 |
[vue-cli-service]     48 | const app = createApp(App)
[vue-cli-service] ERROR in src/main.ts:51:8
[vue-cli-service] TS2345: Argument of type 'VueMoment' is not assignable to parameter of type 'Plugin_2'.
[vue-cli-service]   Type 'VueMoment' is not assignable to type '{ install: PluginInstallFunction; }'.
[vue-cli-service]     Types of property 'install' are incompatible.
[vue-cli-service]       Type 'PluginFunction<undefined>' is not assignable to type 'PluginInstallFunction'.
[vue-cli-service]         Types of parameters 'Vue' and 'app' are incompatible.
[vue-cli-service]           Type 'App<any>' is missing the following properties from type 'VueConstructor<Vue>': extend, nextTick, set, delete, and 3 more.
[vue-cli-service]     49 |   .use(IonicVue)
[vue-cli-service]     50 |   .use(router)
[vue-cli-service]   > 51 |   .use(VueMoment, {
[vue-cli-service]        |        ^^^^^^^^^
[vue-cli-service]     52 |     moment
[vue-cli-service]     53 |   }
[vue-cli-service]     54 |   .use(ElementUI)

My main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

import { IonicVue } from '@ionic/vue';

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';

/* Theme variables */
import './theme/variables.css';


const moment = require('moment')
import VueMoment from 'vue-moment'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import './sass/theme/index.css';

import 'animate.css'

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

import esLocale from 'element-ui/lib/locale/lang/es';
import caLocale from 'element-ui/lib/locale/lang/ca';
import locale from 'element-ui/lib/locale'


require('moment/locale/es')
IonicVue.moment().locale(lang)


const app = createApp(App)
  .use(IonicVue)
  .use(router)
  .use(VueMoment, {
    moment
  }
  .use(ElementUI)
  .use(VueSweetalert2)
  .use(esLocale);
  
router.isReady().then(() => {
  app.mount('#app');
});

Thank you so much!

1 post - 1 participant

Read full topic