I have successfully added the following code which provides me with the sideNav from materialise:
<v-btn-link v-side-nav:side-nav="nav" class="button-collapse btn-flat" id="btn-side-menu"><i class="material-icons">menu</i></v-btn-link>
<v-side-nav id="side-nav" class="hide-on-small">
<a v-on:click="handleNavDashboard()">Dashboard</a>
<a v-on:click="handleLogout()">Logout</a>
</v-side-nav>
and I use the following methods:
methods: {
handleLogout () {
console.log('LOGGED OUT')
this.$store.dispatch('clearAuthUser')
window.localStorage.removeItem('authUser')
this.$router.push({name: 'login'})
},
handleNavDashboard () {
console.log('GOING DASHBOARD')
console.log(this)
this.$router.push({name: 'dashboard'})
}
}
so when I am on the home page and i click Dashboard, I get the dashboard contents on the screen but the sideNav menu and the darkened background are still there. Materialise-css says you can use this function
$('.button-collapse').sideNav('hide');
to hide it progmatically but I don't have jQuery installed. How to I reset the sideNav after a nav click?
CDN
From Materialize docs:
One last thing to note is that you have to import jQuery before
importing materialize.js!
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
NPM
Much better way, install jQuery via npm :
npm install jquery
and use webpack ProvidePlugin to make jQuery global module available in all of your files
here is sample of webpack.config.js file
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
In Vue.js DOM manipulations are encapsulated inside directives, you can use conditional rendering directives v-if or v-show to make this work without using jquery:
jsFiddle example
Also check component framework Vuetify.js that provide clean, semantic and reusable components.
If you want to include jQuery in to a project which is using requires or imports, then you need to make sure it's required and not included using script tags, because it will be outside the scope of the compiled code (unless it was shimmed), so add the following to your project:
ES6 syntax:
import jQuery from 'jquery';
window.$ = window.jQuery = jQuery
ES5 Syntax:
window.$ = window.jQuery = require('jquery');
And make sure you have installed jQuery:
npm install jquery --save-dev
This puts jQuery into the global scope so it can be used site wide. The docs for that package don't really make that clear, and for some reason they don't mention that jQuery is a dependency, but looking at the code it clearly is for some of the components.
If you don't want to use JQuery and Materialize, you can use the directive :v-show="showAside" or :v-if="showAside" with a property like showAside (in data) and handle the value with a click.
There is a very quick and cheap example: https://jsfiddle.net/nosferatu79/p85rw6xz/
Related
I am trying to use the Masonry plugin with Bootstrap5 and NuxtJS. When I follow the example here
https://getbootstrap.com/docs/5.0/examples/masonry/ and incorporate it into my own codesandbox, I notice that my demo is not in the correct masonry format. See the gaps? My sandbox
My example:
Bootstrap's example:
What do I need to do to get my demo into format shown on the Bootstrap Masonry example page?
I checked how to load the script from a CDN either globally or locally. It was working but at one condition: you needed to NOT start on the masonry page.
Meaning that if you loaded the app on a specific page, then moved to the one with the masonry it was working. But not if you started on this specific page. So, a pretty subpar solution.
This article was really helpful to understand how to wait until the CDN script is fully loaded: https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
Then I realized that we are far better installing it directly as an NPM dependency. Therefore, I proceeded to the masonry repo. Found a great message on how to setup the whole thing in Nuxt.
And after a removal of some useless stuff and some modern dynamic import, here we are
<template>
<main>
<h1>Bootstrap and Masonry</h1>
<div class="row" id="masonry">
<!-- ... -->
</main>
</template>
<script>
export default {
async mounted() {
if (process.browser) {
let { default: Masonry } = await import('masonry-layout')
new Masonry('#masonry', { percentPosition: true })
}
},
}
</script>
The final solution is looking pretty well and there is not a lot of code. On top of that, the code is properly loaded. And you can load it on a click or any other event.
So I'm trying to add Vue3 to an existing asp.net core project. What I'd like to happen is for my razor app to render as normal, then use custom vue components to give my frontend a more reactive feel. However, when I mount an empty vue app to my wrapper div (parent of all other body content), it seems to be deleting all innerHTML of that wrapper div, completely removing all server rendered body content.
In my _Layout.cshtml file, I'm wrapping all content in a div with id 'app'.
<body>
<div id='app'>
#RenderBody()
</div>
<script src="~/js/vue-app/dist/js/chunk-vendors.76316534.js"></script>
<script src="~/js/vue-app/dist/js/app.bf4c5ba9.js"></script>
</body>
in main.js
import { createApp } from 'vue'
const vueApp = createApp({}).mount('#app');
// component definitions below
With the app set up like this, when I run my .net project I see a blank white browser window instead of the razor compiled html that I expect. In Vue2, it was possible to do this:
const vueApp = new Vue({
el: '#app',
data: {
....
},
methods: {
....
}//, etc
});
Which would result in the app being rendered as normalthe vue app bound to #app, making vue available to the child content (model binding, vue click handling, etc).
I've tried playing around with the isHydrate optional parameter on mount(), but it causes no change in the result.
Am I missing something here? How do you slowly migrate an existing project to use vue3 if you can't mount the app without clearing content? Any guidance is much appreciated.
Thank you
Notes:
vue-next runtime-dom source If this method is the mount method getting called, I'm not sure why container.innerHTML would not be getting set in the component. {} is not a function, and render/template is not defined for it.
vue-next runtime-core apiCreateApp source If this is the method getting called....I have no idea.
Update
Vue 3, without template renderer, will not be able to handle the templates after it has been compiled. To fix that, you can import vue/dist/vue.esm-browser (and vue.runtime.esm-browser.prod for prod), instead of the default vue. This will allow run-time component rendering.
This is a rookie question. I'm trying to take some baby-steps into Electron, Vue, Webpack, and Node. To that end, I've used electron-forge to spool out a boilerplate project as a starting point, like this:
npx create-electron-app my-project --template=typescript-webpack
After the project has been created everything (seemingly) works as expected. If I make any edits I can see webpack is invoked and reloading the content reveals my edits. So far so good.
My next step was to introduce the simplest Vue.js 'hello world' content I could. First, I install Vue.js using NPM, like this:
npm install "vue"
I then edit the boilerplate index.html to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<div id="vue-app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#vue-app',
data: {
message: 'This message is from Vue!'
}
})
</script>
</body>
</html>
Which does not work. If I change the script tag to use the CDN for the Vue.js script (instead of the node_modules folder), everything works as expected.
My conclusion is that although I can reference Vue.js in my node_modules folder at design time that location does not exist in my output at run time. I'm not certain if that is due to how webpack is configured, or due to how electron works - but it strongly implies there must be something I need to do, either programmatically or via the webpack configuration to properly reference the script.
So what is the right way to 'reference' the local Vue.js script?
Thanks!
You need to reference vue via some bundler like webpack (otherwise, like you said, it is not available at runtime). Your method won't work because the generated file structure isn't the same as the one you have during 'design time'
Here's an example with vue-cli which sets up a starter project:
npm i -g #vue/cli
vue create project-name
cd project-name
vue add electron-builder
npm install
Done. Your project is operational.
With one little caveat you would encounter later, if you are using vue-router. Add the following in router.js (it changes router mode to hash instead of history so it works with electron).
export default new Router({
mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})
As a sidenote, vue-cli abstracts away a lot of config. If you ever get lost, just print it out with
vue inspect > ./app/inspect.js.md
(The part after > means save to the named file, otherwise it would print it out in your console.) Check it out, that's the correct set up you're looking for, just auto created with vue-cli.
Also, check out the generated /public/index.html, it has no mention of importing vue ;)
Best of luck
After some tinkering, I came up with this solution:
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<div id="vue-app">{{ message }}</div>
</body>
</html>
I then added an import statement to the electron-forge boilerplate renderer.ts, like this:
import './vueapp.js';
and finally, I created a new script file called vueapp.js like this:
import Vue from 'vue/dist/vue.js';
var app = new Vue({
el: '#vue-app',
data: {
message: 'Hello Vue!'
}
});
I welcome feedback and comments; this may or may not be the correct approach and would love to hear how others have done this.
I have a form in my Vue component which uploads the api file. Now I want to render the contents of the file like this:
I have imported swagger client library: https://github.com/swagger-api/swagger-ui.
Now, here
is an example of how you do it in a static page. But I need to do it inside a Vue component (or Quasar, specifically), so I do it like that:
Register swagger-ui inside my register components file:
<link rel="stylesheet" type="text/css" href="swagger-ui.css">
Now it is available as:
this.swaggerUI({})
anywhere in my components. Inside my component I have a div in a template to render the api file:
<template>
<q-form>here lies q-file element, submit button and other stuff</q-form>
<div id="swagger-ui"></div>
</template>
In the mentioned question he had something like:
<script>
window.onload = function() {
const ui = SwaggerUIBundle({
url: "https://yourserver.com/path/to/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
]
})
window.ui = ui
}
</script>
Here's the difference: first of all, no window.onload, I must render it on submit button. Then, I deal with an uploaded file stored in my model, so no URL here. Now, I don't get how to make it work with locally stored file, when I try with the remote url, it gives me:
vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "Invariant Violation: _registerComponent(...): Target container is not a DOM element."
I was getting a similar error (Target container is not a DOM element) trying to use a static swagger spec. Instead of using window.onload, I found that Vue has the mounted() function, so this Vue 3 file worked for me:
<template>
<div class="swagger" id="swagger"></div>
</template>
<script>
import SwaggerUI from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
export default {
name: "Swagger",
mounted() {
const spec = require('../path/to/my/spec.json');
SwaggerUI({
spec: spec,
dom_id: '#swagger'
})
}
}
</script>
This one appeared to be a simple yet very unobvious typo: in windows.onload function:
dom_id: '#swagger-ui',
must instead be
dom_id: 'swagger-ui',
without hash sign, that's it!
I'm trying to bundle only required Font Awesome 5 icons via webpack, but the icons are not replaced in the DOM.
I've added all required packages from the documentation:
yarn add -D #fortawesome/fontawesome
yarn add -D #fortawesome/fontawesome-pro-solid
yarn add -D #fortawesome/fontawesome-pro-regular
yarn add -D #fortawesome/fontawesome-free-brands
The following custom JS is included:
"use strict";
import fontawesome from '#fortawesome/fontawesome';
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
fontawesome.icon(faCheck);
function iconsDoneRendering () {
console.log('Icons have rendered'); // No output in console
}
fontawesome.dom.i2svg({
callback: iconsDoneRendering,
})
The HTML template:
<head>
<link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css -->
</head>
<body>
<ul class="fa-ul">
<li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li>
<li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li>
</ul>
<script src="/js/app.js?v2.1.4"></script>
</body>
The svg path is inside the bundled JS file, but I can't figure out which method needs to be called.
The following JS code solves the problem (since v5.0.2):
"use strict";
import fontawesome from '#fortawesome/fontawesome';
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '#fortawesome/fontawesome-pro-regular/faPhone';
fontawesome.library.add(faCheck,faPhone);
I realize this is already answered, but I'd like to give some visibility to the full solution since the information above does not include how to execute the SVG icon replacement.
If you're loading Font Awesome 5 via NPM & WebPack for use in front-end HTML like I am, you will need to do something like this in your JS that's included in your bundle:
"use strict";
// Import FontAwesome: https://fontawesome.com/how-to-use/use-with-node-js
import fontawesome from '#fortawesome/fontawesome';
// This enables using FontAwesome in CSS pseudo elements
// see: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements
fontawesome.config.searchPseudoElements = true;
// Icons should be imported individually to keep bundle size down
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '#fortawesome/fontawesome-pro-solid/faPhone';
fontawesome.library.add(faCheck, faPhone);
// If really necessary, entire styles can be loaded instead of specifying individual icons
//import solid from '#fortawesome/fontawesome-pro-solid';
//fontawesome.library.add(solid);
// Execute SVG replacement
fontawesome.dom.i2svg();
That last line is key, you have to execute SVG icon replacement manually.
We just released version 5.0.2 and updated the #fortawesome NPM packages to fix a few bugs related to this. Make sure you upgrade before you try anything else.
The missing step of the above example is to add the icon to the library:
fontawesome.library.add(faCheck)
Try to use
fontawesome.library.add(faCheck);
instead of
fontawesome.icon(faCheck);
If it does not work, please update your question with your DOM template, to see how it's defined in there.