Trying to get this to work:
<script>import "preline/dist/preline.js";</script>
</body>
</html>
#how to import scripts on every page load with view transitions
languid moon
sweet roverBOT
Hi @languid moon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To import scripts on every page load with Astro's View Transitions, you can use the astro:page-load event. This event fires at the end of page navigation, after the new page is visible to the user and blocking styles and scripts are loaded. You can listen to this event on the document.
Here's an example of how you can use this event to run your script on every page navigation:
<script>
document.addEventListener('astro:page-load', () => {
import("preline/dist/preline.js");
});
</script>
This script should be placed within the <body> tag of your HTML structure.
Remember to import and add the <ViewTransitions /> component to the <head> of your page layout to enable Astro’s default client-side navigation. Here's an example of how to do this:
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
<head>
<title>My Homepage</title>
<ViewTransitions />
</head>
<body>
<h1>Welcome to my website!</h1>
<script>
document.addEventListener('astro:page-load', () => {
import("preline/dist/preline.js");
});
</script>
</body>
</html>
This will ensure that your script is reloaded on every page navigation, providing the desired functionality.
Sources:
- Astro Documentation: View Transitions (https://docs.astro.build/en/guides/view-transitions#adding-view-transitions-to-a-page)
- Astro Documentation: Lifecycle events (https://docs.astro.build/en/guides/view-transitions#astropage-load)
- Astro Documentation: Tutorial - Extend with View Transitions (https://docs.astro.build/en/tutorials/add-view-transitions#_top)
- Discord Support Thread: Getting scripts to persist with ViewTransitions (https://discord.com/channels/830184174198718474/1193760306690793552)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
languid moon
@sweet rover this isnt working - works without the eventlistener though.
sweet roverBOT
Let me check the knowledge base for you. One moment! :books:
If the script isn't working with the astro:page-load event listener, it might be due to the asynchronous nature of the import() function. The import() function returns a promise, which means it's asynchronous and might not execute immediately.
However, if the script works without the event listener, it might be that the script doesn't need to be reloaded on every page navigation. In that case, you can simply import the script directly in your HTML file:
<script type="module">
import "preline/dist/preline.js";
</script>
This script should be placed within the <body> tag of your HTML structure.
If you're still facing issues, it would be helpful to have more information about the specific error messages you're encountering or the behavior you're observing.
Sources:
- Astro Documentation: View Transitions (https://docs.astro.build/en/guides/view-transitions#adding-view-transitions-to-a-page)
- Astro Documentation: Lifecycle events (https://docs.astro.build/en/guides/view-transitions#astropage-load)
- Astro Documentation: Tutorial - Extend with View Transitions (https://docs.astro.build/en/tutorials/add-view-transitions#_top)
- Discord Support Thread: Getting scripts to persist with ViewTransitions (https://discord.com/channels/830184174198718474/1193760306690793552)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
languid moon
@sweet rover didnt work with
<script type="module">
import "preline/dist/preline.js";
</script>
or
<script type="module">
document.addEventListener('astro:page-load', () => {
import("preline/dist/preline.js");
});
</script>
</body>
</html>
either
sweet roverBOT
Let me check the knowledge base for you. One moment! :books:
I'm sorry to hear that you're still having trouble. It's possible that the issue might be related to how the script is being imported or executed in the context of your project.
Astro uses Vite under the hood, which has certain limitations when it comes to dynamic imports. For instance, Vite needs to be able to statically analyze all import statements at build time. This means that completely dynamic imports (where the module specifier is not a string literal) are not supported (source (https://github.com/withastro/astro/issues/6224)).
If the preline.js script is a local file in your project, you might need to adjust the path to the script file. If it's a package installed from npm, you might need to check if the package is compatible with ESM (ECMAScript Modules). Some packages published in a legacy format might need adjustments in the Vite config to work with Astro (source (https://docs.astro.build/en/guides/imports#npm-packages)).