Vanilla JS ion-menu example

So I’m following the vanilla implementation to Ionic and so far on a simple index.html page I import from the CDN the 2 js files and the css.

Then I go to the Javascript example for an ion-menu (As shown here) and then I add a scripts.js on my project, with the type of module.

But here comes the problem, the Vanilla JS example shows…

<script type="module">
    import { menuController } from '@ionic/core';
    window.menuController = menuController;
</script>

@ionic/core is not present in a Vanilla project. That’s a node module and installing node module is never mentioned on the Vanilla JS guide for Ionic.

What steps are missing here, or in what other way we get the ion-menu working?

Hi

I think you need to grab the ion-menu dom element and then apply methods to it.

In typescript:

export const getIonicMenu = (menuId):MenuI => {
    const query = "ion-menu[menu-id='" + menuId + "']";
    return document.querySelector(query) as unknown as MenuI;
}

Examples (a bit of svelte and typescript, but you should catch the overall idea this way for plain vanilla JS )

const closeAndNavigate = (url) => {
  console.log("Navigate url", url);
  defaultAnalytics.logEvent("page_view", { page_title: url });
  path.set(url);
  $goto(url);
  getIonicMenu("mainmenu")
    .close(true)
    .then(() => {});
};
const goToReview = () => {
  path.set("/RateMe");
  getIonicMenu("mainmenu")
    .close(true)
    .then(() => {});
};

Taken from svelte-ionic-app/Menu.svelte at 14ac8597bc64bed186b43efa8fcdfccd04047c59 · Tommertom/svelte-ionic-app · GitHub

Thanks you very much. That was indeed the solution.
Now from the button I’m calling

onclick="openMenu('first')"

and on openMenu I have

function openMenu(id) {
	document.querySelector(`ion-menu[menu-id=${id}]`).open();
}

At the same time logging the object I can see what other methods are available.

Thanks once again.

1 Like

Now that I notice there is a “View source” also under the phone on the example page. Apparently other way to import it (Or the way) in vanilla js is:

<script type="module">
    import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
    window.menuController = menuController;
  </script>
1 Like

Thx for that one. Indeed maybe cleaner, although I wonder if it leads to a http call which Might hit the response time of the app? Can you confirm?

And I wonder if this way of importing is supported by all browsers.

Right, I copy the online example, but we could reference the local copy of index.esm.js in this case. (and all the imports this file may use)

in any case, i think the documentation should be updated, as clearly importing a node module isn’t “Vanilla JS” Unless you upload the whole library that is on the node modules folder, but don’t think that’s the right thing to do. I may be wrong and maybe that’s what Ionic expect us to do.

1 Like

feel free to do a PR or issue a documentation update.