I have a Vue component that I'm compiling into a web component using the following build command:
npm run build -- --target wc --name projName src\components\server-config.vue
I'm missing something though in my Vue file cause the web component won't render the font awesome icons. Here is what it looks like when I, "npm run serve"
This is what it looks like after I compile it into a web component and open it in demo.html:
I see several issues:
Fonts are different
Missing Eye button for peeking the password
Checkbox box is missing (though if you mouse over it you still get a glow effect)
Eye icon is missing. (Just included as a test outside of Vuetify)
How can I properly include fonts into my component? Here is my current vue file:
<template>
<div style="text-align: center; font-family: sans-serif">
<v-text-field label="Password" class="mx-4" v-model="password" :type="showPass ? 'text' : 'password'" #click:append="showPass = !showPass" :append-icon="showPass ? 'far fa-eye' : 'far fa-eye-slash'"></v-text-field>
<v-checkbox class="mx-4" v-model="useIntegratedAuthentication" label="Use Integrated Authentication" ></v-checkbox>
<div>
<i class="far fa-eye"></i>
<span>My eye here</span>
</div>
</div>
</template>
<style scoped>
#import '../../node_modules/vuetify/dist/vuetify.min.css';
#import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900';
#import 'https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css';
</style>
<script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>
<script lang="ts">
import { VTextField, VCheckbox } from 'vuetify/lib';
import vuetify from '#/plugins/vuetify';
import Vue from 'vue';
export default Vue.extend({
vuetify,
components: {
VTextField, VCheckbox
},
data() {
return {
showPass: false,
password: '',
useIntegratedAuthentication: false
};
}
})
</script>
Figured out a workable solution. You need to load the font-faces inside a script tag after the component is mounted:
mounted() {
const css = `
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot);
src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.eot);
src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.svg#fontawesome) format("svg")
}
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.eot);
src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}`;
// if our style is already injected we do not need to inject it a second time
if (!document.getElementById('myCustomInjectedStyle')) {
const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style');
style.id = 'myCustomInjectedStyle';
style.type = 'text/css';
style.innerText = css;
head.appendChild(style);
}
},
I never got material designs to work for the checkbox so I updated my vuetify.ts file to always use font awesome.
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'fa'
}
})
Use font awesome globally
Add in yuor project/public/index.html head tag
<link rel="stylesheet" ref="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
And use the tags from their site in your component. like <i class="fab fa-adn"></i>
Related
I am using Vite + Electron to make a desktop app demo.
But it cannot load png resource, but js, css resource is fine. So it worked like this
png canoot be loaded
when I check the console, it shows: Failed to load resource: net::ERR_FILE_NOT_FOUND
Also, the url of the png is weird：
it is not even a common file path
So what happened really ???
Here is my code:
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
base: path.resolve(__dirname, './dist/'),
plugins: [vue()]
})
index.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
webSecurity: false,
}
})
win.loadFile('dist/index.html')
win.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="/src/assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
I know perhaps this problem sounds silly, but I just start it and Vue,JS... are really not my comfort zone. So if anyone could help me, I will really appreciate it.
I'm a beginner on PixiJs.
I want show a sprite image as some example, but I'm defeated.
The framework is Vue with Typescript.
I used vue-cli to generate a project ,and only modified the App.vue file like this:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
<div ref='iv'></div>
</template>
<script lang="ts">
// import logo from '#/assets/logo.png';
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';
import * as PIXI from 'pixi.js'
#Options({
components: {
HelloWorld,
},
})
export default class App extends Vue {
refs():any{
return this.$refs
}
app=new PIXI.Application({width:400,height:300})
setup(loader:PIXI.Loader){
const bunny = new PIXI.Sprite(loader.resources.logo.texture);
this.app.stage.addChild(bunny);
}
mounted(){
this.refs().iv.appendChild(this.app.view)
this.app.loader.add("logo","#/assets/logo.png").load(this.setup)
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
but if I use import to load image, like:
import logo from '#/assets/logo.png';
...
mounted(){
...
let s=PIXI.Sprite.from(logo)
this.app.stage.addChild(s)
...
}
It works.
What's my mistake?
How can I use the loader correctly?
I'm trying to access the different methods from tinyMCE, but it can't find get, setContent or insertContent. Anyone got any ideas how I can access these? The following code is a copy from their documentation.
Here is my code so far:
App.vue:
<template>
<div id="app">
<Editor id="test"></Editor>
<button #click="insertData">Test</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
Editor
},
methods: {
insertData: function () {
Editor.get("test").setContent("This is a test.")
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
// es modulesc
var commonjsrequire = require('commonjs-require');
// NOTE: default needed after require
var Editor = require('#tinymce/tinymce-vue').default;
Vue.component('Editor',
() => import('#tinymce/tinymce-vue')
);
new Vue({
render: function (h) { return h(App) },
}).$mount('#app')
The functions you are after are tied to the tinymce global object. While you define an Editor component in the context of the application the actual API calls for TinyMCE are part of the tinymce global object.
For example:
tinymce.get("test").setContent("<p>This is a test.</p>")
So i have this code as my index page and It was working, but a couple minutes later it just stopped.
the error is:
SyntaxError
Unexpected token export
Within the script section, If i remove my import then the error will go away, but I need to import it and use it. It was working with the package being imported, but I have looked this code up and down I have no idea what the heck is going on.
Anyone have any suggestions? Am I dumb and have missed something so simple?
<template>
<section class='container'>
<img class='my-4' src="~/assets/images/carousel/1.png" alt="card" />
<div class='text-center mx-auto my-4'>
<button> Send a card </button>
<p class='subtle my-4'> Or </p>
<button class='btn-blue'> Open a card </button>
</div>
<div id="qrcode"></div>
</section>
</template>
<script>
import qrcode from 'qrcode-generator-es6'; <<<<<<<<< SYNTAX ERROR AROUND HERE
export default{
data : function(){
return {};
},
methods : {
},
mounted : function(){
const qr = new qrcode(0, 'M');
qr.addData('https://app.voxicard.com/?v=vx-9FEFCA66-F592-4FF5-97B8-93B2FD78666D');
qr.make();
document.getElementById('qrcode').innerHTML = qr.createSvgTag({
margin : 0,
cellColor : function(){
return "#48658B";
},
});
},
};
</script>
<style>
#qrcode {
width: 200px;
height: 200px;
background-color: red;
}
img {
display: block;
max-height: 500px;
text-align: center;
margin: auto;
}
button {
font-size: 125%;
}
</style>
In your build property in nuxt.config.js you'll need to add a transpile block that targets this library:
build: {
transpile: [
'qrcode-generator-es6'
]
}
This is due to the fact that nuxt expects libraries to export as CJS modules and not ES6 modules.
In nuxt.config.js replace export default { on module.exports = {
I installed uikit with yarn.
yarn add uikit
And additionally less-loader, less and css-loader because this site said so.
Now I tried using UIkit in my App.vue like so.
<template>
<div id="app">
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>This is a text!</p>
</div>
<table class="uk-table uk-table-striped">
<tr><td>Hello World!</td></tr>
<tr><td>Hello World!</td></tr>
<tr><td>Hello World!</td></tr>
</table>
</div>
</template>
<script>
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
export default {
mounted: function() {
this.getTestJson();
},
methods: {
getTestJson: function() {
this.$http.get('http://localhost:8090/test').then((res) => {
console.log(res.body)
});
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
This is not enough, the UIkit components are not displayed properly. What else do I have to do?
Do I have to use vuikit?
This link will help, and basically you need to do the following:
After installing uikit package, add this code to App.vue
<style lang="less">
#import "../node_modules/uikit/src/less/uikit.less";
</style>
And then add this code to main.js
import uk from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
uk.use(Icons)
You can also add global mixin for uk object in case you wanted to use UIKit JavaScript functionality anywhere in your components e.g. this.uk.toggle('#toggle-elm').toggle():
Vue.mixin({
data: function () {
return {
get uk () {
return uk
}
}
}
})
new Vue({
el: '#app',
...