We Keep Coding

nuxt.config.js not loading .css files

I am attempting to include my meta information (mostly visible in the static .css and .js files) to my Nuxt application by adding them into nuxt.config.js. I am expecting all of my global meta tags (charset, keywords, etc) as well as my CSS to be loaded when I reload the project on the page I'm testing on, however only using the local vue-meta section gives these desired results. I would like to be able to have most of my meta in the configuration file, so while leaving everything in each page is an option,it is not the one I would like to take.
I get no warnings or errors when loading the page, which makes me believe that it's not a problem, but I have just started using this file and would like to know if it is something trivial
The head I am trying to implement in nuxt.config.js is below. All file paths are valid (since they are what I use in the individual pages and they work just fine.
module.export = {
head:{
meta: [
{charset: 'utf-8'},
{
name: 'keywords', content: '~some keywords~'
},
],
link: [
{ rel: 'stylesheet', href: '/css/style.css' },
{ rel:'stylesheet', href:'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'},
{ rel:'canonical', href:'https://www.self.com' }
],
script: [
{src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'},
{src: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'},
{src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'},
]
},
//...
}
I also have a similar body in my css: section, however that produced no results as well.

I believe you are missing a period ( . ) in your CSS link href, try:
href: './css/style.css'
Also you can try adding CSS as a property of your head object:
head {
link: [...],
css: ["./css/style.css"],
script: [...]
}/*end of head*/
If you try the second option then remove the CSS ref from your link array.
Good luck!

How to incorporate custom theme js files into Nuxt

I am attempting to use a purchased Bootstrap theme (because I am design challenged) into a Nuxt site. I have managed to get all of the scss/css files included, but I'm having problems finding a way to get the custom .js files to be added as well. The theme itself uses jQuery, and the two files are all jQuery functions. I've added bootstrap-vue and jQuery from npm, and I've tried adding the files in the script item in the head section in nuxt.config.js like so using theassets` directory;
head{
script: [
{ src: '~assets/js/min/plugins.min.js' },
{ src: '~assets/js/min/custom.min.js' },
{ src: '~assets/js/min/modernizr.min.js' },
],
}
and like so using the static directory
head{
script: [
{ src: 'js/min/plugins.min.js' },
{ src: 'js/min/custom.min.js' },
{ src: 'js/min/modernizr.min.js' },
],
}
but either way, I keep getting a jQuery is not defined error.
Is there another way to load these files so that they have access to jQuery? Search results seem to indicate that maybe I should use a plugin, but I'm not sure how to do that just to add a local js file.

Maybe you have just a / missing?
Assuming you have this folder sturcture:
/static/js/modernizr-custom.js
You could include it:
head: {
...
script: [
{ src: '/js/modernizr-custom.js' }
]
}
Does this solve your problem?
Also it is of course mandatory that if your plugin.js is using jQuery that you actually load jQuery.
To do that, just include jQuery in the same way to your scripts in nuxt.config.js:
head: {
...
script: [
{ src: '/js/jquery.min.js' },
{ src: '/js/plugin.js' }
]
}
This means you have to download jquery and put it into your static directory.
Alternatively you could use a CND to load jquery from. (This makes sense, because other pages might have loaded jquery from the same cdn and you have it already cached).
{ src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js }

Is it possible to use Materializecss without jQuery?

I would like to use materializecss without jQuery. For example, I want to do the following without the use of jQuery:
$('.chips-initial').material_chip({
data: [{
tag: 'Apple',
}, {
tag: 'Microsoft',
}, {
tag: 'Google',
}],
});
Thanks

Starting with Materialize 1.0.0, jQuery is not a dependency anymore.
See https://medium.com/#materializecss/materialize-to-1-0-and-beyond-e0233b8ac15
Previous releases still rely on jQuery. Alternatively you can use Cash by Ken Wheeler.

Since version 1.0.0 you can.
const elem = document.querySelector('.chips');
const instance = M.Chips.init(elem, options);
List of possible options for the chips.
For Angular2+ you'll need:
npm install materialize-css
In package.json
"dependencies": {
"materialize-css": "^1.0.0-alpha.4",
}
or later version.
In .angular-cli.json
"styles": [
"../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
"../node_modules/materialize-css/dist/js/materialize.js"
],
And to be able to use M object in your components, simply add to the imports
declare const M: any;

Yes, it is possible.
Add this to the head section of each HTML document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Then you can add classes to tags to add styles. There are lots of useful tutorials that can be found on google search. My favorite one is right here:
https://www.youtube.com/watch?v=gCZ3y6mQpW0&list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff&ab_channel=TheNetNinja

How can i add a search to a reveal.js presentation?

How can i add a search to a reveal.js presentation ?
There is a search.js file available under plugins but i'm not sure how to use it.
Please help me to set this up. thank you.

To include the search plugin, you can add an entry to the dependencies array in the initialization object (this is at the bottom of the index.html file in the repo):
Reveal.initialize({
dependencies: [
{ src: 'plugin/search/search.js', async: true },
],
});

dojo 1.9 config with custom package paths

So I can see that the file was loaded properly from the dojoConfig reference but, when I attempt to use the module its 'undefined' any suggestions:
Updated: This will load the file, but when I throw the variable into a console nothing comes out. When inspecting it, I see a lot of text instead of the array of objs I placed inside.
index.html:
<script>
dojoConfig = {
tlmSiblingOfDojo: true,
async: true,
parseOnLoad: false,
packages: [
{ name: "main", location: "/components/3.6compact/js/dojo/dojo/main"},
{ name: "jquery", location: "/scripts/libs", main: "jquery"},
{name: "jam", location: "/scripts/mylibs", main: "lod"}
]
};
</script>
<script src="/components/3.6compact/js/dojo/dojo/dojo.js"></script>
<script src="/scripts/app.js"></script>
lod.js:
define([], function(){
var lod = [{
'level': 0,
'resolution': 156543.033928,
'scale': 591657527.591555
}, {
'level': 1,
'resolution': 78271.5169639999,
'scale': 295828763.795777
}
];
return lod;
});
app.js:*
require(['jam'], function(jam){
console.log(lod);
});

It's hard to provide an example on something like jsfiddle where we can't specify resources by file path, but I think the problem is with the module id in your javascript. In your dojoConfig, the location property defines the path to the directory where modules in that package can be located.
If your lod module is located at in /scripts/mylibs/lod.js, then you'd need to require lod/lod:
require(['lod/lod'], function(lod) {
console.log("lod module:", lod);
});
Here's the documentation for dojo config. I would look at the "Loader Configuration" section.
I attempted a jsfiddle anyway, which could be useful: http://jsfiddle.net/tupton/ftN6h/
Note the errors in the console:
'lod':
GET http://fiddle.jshell.net/scripts/mylibs/LOD.js 404 (Not Found)
and 'lod/lod':
GET http://fiddle.jshell.net/scripts/mylibs/lod.js 404 (Not Found)
I'm not familiar with the "main" property of the package config, but it looks like that's what it's using when you try to require an entire package. Maybe try changing that to "lod" so it looks for ".../lod.js"?