Metronic 9 Tailwind with Vue
Hi,
I followed instructions but i am unable to perform this step.
Using typescript initialization with Vue-router
To use typescript components in combination with vue-router , the component initialization must be triggered on every page change within beforeEach event.
// index.ts
import KTComponent from '../theme/core/index.spa';
import KTLayout from '../theme/app/layouts/demo1.js';
router.beforeEach(() => {
KTComponent.init();
KTLayout.init();
});
Replies (8)
Could not find a declaration file for module '../theme/app/layouts/demo1.js'. 'c:/Users/Lenovo/Desktop/VueTrial/metronic-vue-tailwind/src/theme/app/layouts/demo1.js' implicitly has an 'any' type.
Uncaught ReferenceError: process is not defined
at index.ts:19:29
Hi,
We do not use process variables in our index.ts file, did you make any custom changes?
Please note that vite you can access environment variables using import.meta.env.MODE. See https://vitejs.dev/guide/env-and-mode#env-variables
Regards,
Lauris Stepanovs,
Keenthemes Support Team
2
Using typescript initialization with Vue-router
To use typescript components in combination with vue-router , the component initialization must be triggered on every page change within beforeEach event.
// index.ts
import KTComponent from '../theme/core/index.spa';
import KTLayout from '../theme/app/layouts/demo1.js';
router.beforeEach(() => {
KTComponent.init();
KTLayout.init();
});
I went to change router for which i created router/index.ts
Hi,
May I ask if you managed to set up a working application using our integration documentation and example repo?
I suggest starting with creating and running the basic Vue application as shown in our integration repo. Once you have a working application, you can continue with the vue-router. Integrating vue-router involves a few extra steps that our documentation doesn't currently cover. You can follow this guide to implement vue-router into your Vue project.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
If you haven't managed to get a working application by following our integration guide, refer to the Metronic Tailwind Vue project in our guides repo. Since it is a public repo, it doesn't contain theme assets. Follow the steps below before running the application:
- Open the repo at https://github.com/KeenthemesHub/metronic-tailwind-html-integration.
- Download the
metronic-tailwind-vuefolder. - Copy the
srcfolder from themetronic-tailwind-htmlpackage and paste it into themetronic-tailwind-vue/srcdirectory. - Rename the copied folder to
theme. The directory structure should now look like this:metronic-tailwind-vue/src/theme. - Update src/theme/app/layouts/demo1.js you should replace:
KTDom.ready(() => {
KTLayout.init();
});
toexport default KTLayout; - Delete src/theme/core/index.ts and rename src/theme/core/index.spa.ts to index.ts.
- Copy the media folder from
metronic-tailwind-html/dist/assetsand paste it intometronic-tailwind-vue/public. - Install dependencies with
npm installand serve the project withnpm run dev.
Please let us know if you need any help on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Could not find a declaration file for module '../theme/app/layouts/demo1.js'. 'c:/Users/Lenovo/Desktop/VueTrial/metronic-vue-tailwind/src/theme/app/layouts/demo1.js' implicitly has an 'any' type.
Hi,
Metronic 9 does not provide prebuilt pages for Vue. But you can integrate any page from the HTML version and use it within your Vue app.
Have you tried to use this Metronic Vue starter kit example:
https://github.com/KeenthemesHub/metronic-tailwind-html-integration
As per our testing, it should work as expected. Please kindly retry to use the above example and fully follow Vue Integration Guide.
Please try to follow the above guide launch the index page and get everything up and ready. Then you can set your routes and add pages
into your Vue app.
Regards.
