MrMike
March 1, 2021, 7:07pm
1
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
MrMike
March 1, 2021, 11:06pm
3
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
MrMike
March 1, 2021, 11:25pm
4
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.
MrMike
March 2, 2021, 11:28am
6
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.