Modules Tutorial - node or otherwise

support
1

Can someone please point me in the right direction here?

Let’s say there’s a package on NPM like SplideJS that I want to use - how on earth do I use it with npm and hugo?

Or how do I pull it in with hugo modules?

I’ve tried for a few hours now to figure it out, using the docs and answers here, but all I’ve accomplished is breaking my site and keeping it from compiling lol

Is there a simple, step-by-step someone can point me to?

1 Like
2

Install Node.js package(s)

npm install @splidejs/splide

layouts/_default/baseof.html

<head>
  ...
  {{ partialCached "js.html" . }}
  ...
<head>

layouts/partials/js.html

{{ with resources.Get "js/main.js" }}
  {{ if eq hugo.Environment "development" }}
    {{ with . | js.Build }}
      <script src="{{ .RelPermalink }}"></script>
    {{ end }}
  {{ else }}
    {{ $opts := dict "minify" true }}
    {{ with . | js.Build $opts | fingerprint }}
      <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
    {{ end }}
  {{ end }}
{{ end }}

assets/js/main.js

import Splide from "@splidejs/splide";
6 Likes
3

Thank you so much.

This makes sense.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.