Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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();
});


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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:

  1. Open the repo at https://github.com/KeenthemesHub/metronic-tailwind-html-integration.
  2. Download the metronic-tailwind-vue folder.
  3. Copy the src folder from the metronic-tailwind-html package and paste it into the metronic-tailwind-vue/src directory.
  4. Rename the copied folder to theme. The directory structure should now look like this: metronic-tailwind-vue/src/theme.
  5. Update src/theme/app/layouts/demo1.js you should replace:

    KTDom.ready(() => {
    KTLayout.init();
    });

    to

    export default KTLayout;

  6. Delete src/theme/core/index.ts and rename src/theme/core/index.spa.ts to index.ts.
  7. Copy the media folder from metronic-tailwind-html/dist/assets and paste it into metronic-tailwind-vue/public.
  8. Install dependencies with npm install and serve the project with npm 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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(