Add Semantic-UI with jQuery components

commented 2 months ago


I'm trying to add Semantic-UI JS and jQuery via build script.

So far I was only able to add it via CDN. But the goal would be to add it via nuxt.config.js:

const pkg = require("./package"); const jqueryCDN = ""; const suiCDN = "[email protected]/dist/semantic.min.js"; import webpack from "webpack";
module.exports = { mode: "universal", head: { title: "Nuxt App", meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { hid: "description", name: "description", content: "pkg.description" } ], link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }], script: [{ src: jqueryCDN }, { src: suiCDN }] }, loading: { color: "#0082b9" }, css: [ // Loads main style "~/assets/semantic/semantic.css", "~/assets/styles/main.css" ], modules: [], plugins: [], build: { // Jquery config over webpack plugins: new webpack.ProvidePlugin({ jQuery: "jQuery", $: "jQuery", "window.jQuery": "jQuery" }) } };

If I try to add Semantic-UI and jQuery via Plugins (node_modules):
{ src: "jquery" ssr: false } { src: "fomantic-ui" ssr: false }

I always get jQuery is Not Defined.

And of course i've studied the docs and the implementation of axios but that doesnt seem to work either.

Some help would be highly appreciated. Thanks in advance.

commented 8 hours ago

Fortunately I could help myself. I'm now using the vendor packages locally like so:
const jqueryLocal = "/assets/scripts/vendor/jquery-3.3.1.min.js"; const suiJsLocal = "/assets/scripts/vendor/semantic-2.7.1.min.js"; const suiCssLocal = "/assets/styles/vendor/semantic-2.7.1.min.css";

In module.exports in the head section implemented as follows:
head: { link: [ { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }, { rel: "stylesheet", href: suiCssLocal } ], script: [{ src: jqueryLocal }, { src: suiJsLocal }] },

In my case (static generation with nuxt generate) Nuxt.js is looking inside the static/assets folder (not in the assets folder).

Also important to know about the Vue.js life cycle diagram. After working with e.g. the mounted() life cycle all is now up and running.

Maybe this helps someone else who is struggling with the same issues.

Question โ€ข Unresolved
#c7 - Created 2 months ago