Related
I wanted to add font style here like there is an option if you want the font to be arial,san-serif etc... But now the font and font sizes not display in vue2-editor. Can anyone help me?
You can access the code here :
https://codesandbox.io/s/liz23?file=/src/App.vue:0-553
this is the code:
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
<div v-html="content"></div>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<p>Some initial content</p>"
};
}
};
</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>
My answer is based of the excellent answers over at How to add font types on Quill js with toolbar options?. The only thing that I need to change is to use const fonts = Quill.import('formats/font');. vue2-editor exports the Quill object, so you can simply import it as such:
import { VueEditor, Quill } from "vue2-editor";
Then, it is mostly copy-and-pasting the solution in this posted answer. The vue2-editor unfortunately does not expose the default toolbar settings, so you will need to copy it verbatim from the source code and then add your font dropdown manually:
customToolbar: [
// Copied from source
// https://github.com/davidroyer/vue2-editor/blob/master/src/helpers/default-toolbar.js
[{ header: [false, 1, 2, 3, 4, 5, 6] }],
["bold", "italic", "underline", "strike"], // toggled buttons
[
{ align: "" },
{ align: "center" },
{ align: "right" },
{ align: "justify" }
],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ color: [] }, { background: [] }],
["link", "image", "video"],
["clean"],
// This is what I have added
[{ 'font': fonts.whitelist }],
]
See proof-of-concept here: https://codesandbox.io/s/vue2-editor-demo-forked-35wo1?file=/src/App.vue
I'm trying to get the colors from the nuxt.config.js file and put them directly in variables.scss
Currently my variables.scss look like this
#import '~vuetify/src/styles/styles.sass';
.button-blue {
background-color: map-get($blue, darken-2) !important;
color: map-get($blue-grey, lighten-5) !important;
}
I would like to assign the color directly from nuxt.config, more or less this way:
#import '~vuetify/src/styles/styles.sass';
.button-blue {
background-color: primary!important;
color: seconday !important;
}
My nuxt.config.js
css: ['~/assets/variables.scss'],
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
light: {
primary: colors.blue.darken2,
secondary: colors.orange.darken1,
tertiary: colors.green.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
info: colors.green.darken3,
background: '#EAEBEE'
},
dark: {
primary: colors.blue.darken2,
accent: colors.orange.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
background: colors.red.accent3
}
}
}
}
Any suggestion? I'm using Vue + Vuetify + Nuxt
Like this:
.default-box-layout {
padding: 15px;
border: 1px solid var(--v-primary);
background-color: var(--v-background);
width: 100%;
margin: 0;
}
From the docs:
Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components’ blocks.
So, when you add:
theme: {
options: { customProperties: true }, // this line
},
to your Vuetify config, variables will get injected at the css root variables. Now, you can use things like --v-primary-base, like this:
.button-blue {
background-color: var(--v-primary-base);
color: var(--v-secondary-base) !important;
}
More?
See https://vuetifyjs.com/en/features/theme/#custom-properties
I'm trying to use custom fonts stored in my assets/fonts folder with TinyMCE, but it seems like it can't render the font, except for the format selector. The content doesn't display the font correctly, although the font selector shows the font is being applied (in the title, for example).
Here's the code so far:
<template>
<tinymce-editor
:key="id"
:initial-value="initialValue"
:resize="false"
:init="{
selector: 'textarea#format-custom',
height: height,
plugins: 'table wordcount link lists',
menubar : false,
statusbar : false,
toolbar: 'undo redo | bold italic| styleselect | alignleft aligncenter alignright alignjustify | numlist bullist | fontselect',
content_css: [ '//www.tiny.cloud/css/codepen.min.css' ],
content_style: 'body { font-family: Roboto Light; font-size: 16px; }' + '.left { text-align: left; }' + 'img.left { float: left; }' + 'table.left { float: left; }' + '.right { text-align: right; }' + 'img.right { float: right; }' + 'table.right { float: right; }' + '.center { text-align: center; }' + 'img.center { display: block; margin: 0 auto; }' + 'table.center { display: block; margin: 0 auto; }' + '.full { text-align: justify; }' + 'img.full { display: block; margin: 0 auto; }' + 'table.full { display: block; margin: 0 auto; }' + '.bold { font-weight: bold; }' + '.italic { font-style: italic; }' + '.underline { text-decoration: underline; }' + '.title { font-family: Raleway Bold; font-size: 26px; }' + '.subtitle { font-family: Roboto Medium; font-size: 20px; }',
formats: {
alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
bold: { inline: 'span', classes: 'bold' }, italic: { inline: 'span', classes: 'italic' },
titleformat: { inline: 'span', attributes: { title: 'Title'} , classes: 'title', },
subtitleformat: { inline: 'span', attributes: { title: 'SubTitle'} , classes: 'subtitle' } },
style_formats: [ { title: 'Title', format: 'titleformat' }, { title: 'SubTitle', format: 'subtitleformat' } ]
}"
api-key="no-api-key"
model-events="change keydown blur focus paste"
#input="handleInput"
#error="handleError"
/>
</template>
<script>
import Editor from '#tinymce/tinymce-vue'
export default {
components: {
'tinymce-editor': Editor
},
props: {
initialValue: {
type: String,
default: null
},
id: {
type: String,
default: null
},
height: {
type: String,
default: '100%'
}
},
methods: {
handleInput (value) {
this.$emit('input', value)
},
handleError (err) {
console.error(err)
}
}
}
</script>
Here's a print:
If you want to use custom fonts you need to:
Load them into TinyMCE via content_css
Include the fonts via the font_formats configuration option: https://www.tiny.cloud/docs/configure/editor-appearance/#font_formats
You appear to be loading the CSS from the TinyMCE demo site:
content_css: [ '//www.tiny.cloud/css/codepen.min.css' ],
This is likely not something you want to do as our demo CSS would likely not be appropriate for your web site/application. I would change that to use an appropriate CSS for your site. In that CSS you can load a custom font. For example:
#import url('https://fonts.googleapis.com/css?family=Lato');
Note: The reason the TinyMCE menu can render the font is you are likely loading the font on the page that includes TinyMCE but not in TinyMCE itself. The editor content is in its own iframe but the menus are part of the main page. If you inspect the DOM you will be able to see this layout. Using content_css allows you to inject CSS into the editor's iframe.
I am upgrading to webpack-4 from webpack 2.
It is breaking at places where my vue single file component has sass template in it.
It seems like sass loader is not coming into picture when file extension is vue.
I tried addidng sass as an extension in the webpack config, but it started treating vue files as sass files and compilation started breaking.
This is the generated error.
All the files having error have sass template in vue SFC.
ERROR in ./public/vue/applicationform/Academic.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Academic.vue?vue&type=style&index=0&lang=sass&) 51:0
Module parse failed: Unexpected character '#' (51:0)
You may need an appropriate loader to handle this file type.
|
|
> #situation
| font-family: 'Avenir', Helvetica, Arial, sans-serif
| -webkit-font-smoothing: antialiased
# ./public/vue/applicationform/Academic.vue?vue&type=style&index=0&lang=sass& 1:0-135 1:151-154 1:156-288 1:156-288
# ./public/vue/applicationform/Academic.vue
# ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&type=script&lang=js&
# ./public/vue/applicationform/App.vue?vue&type=script&lang=js&
# ./public/vue/applicationform/App.vue
# ./public/vue/applicationform.js
ERROR in ./public/vue/applicationform/Workex.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Workex.vue?vue&type=style&index=0&lang=sass&) 715:0
Module parse failed: Unexpected character '#' (715:0)
You may need an appropriate loader to handle this file type.
|
|
> #situation
| font-family: 'Avenir', Helvetica, Arial, sans-serif
| -webkit-font-smoothing: antialiased
# ./public/vue/applicationform/Workex.vue?vue&type=style&index=0&lang=sass& 1:0-133 1:149-152 1:154-284 1:154-284
# ./public/vue/applicationform/Workex.vue
# ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&type=script&lang=js&
# ./public/vue/applicationform/App.vue?vue&type=script&lang=js&
# ./public/vue/applicationform/App.vue
# ./public/vue/applicationform.js
ERROR in ./public/vue/applicationform/Kra.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/Kra.vue?vue&type=style&index=0&lang=sass&) 73:0
Module parse failed: Unexpected character '#' (73:0)
You may need an appropriate loader to handle this file type.
|
|
> #situation
| font-family: 'Avenir', Helvetica, Arial, sans-serif
| -webkit-font-smoothing: antialiased
# ./public/vue/applicationform/Kra.vue?vue&type=style&index=0&lang=sass& 1:0-130 1:146-149 1:151-278 1:151-278
# ./public/vue/applicationform/Kra.vue
# ./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&type=script&lang=js&
# ./public/vue/applicationform/App.vue?vue&type=script&lang=js&
# ./public/vue/applicationform/App.vue
# ./public/vue/applicationform.js
ERROR in ./public/vue/applicationform/App.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/applicationform/App.vue?vue&type=style&index=0&lang=sass&) 1062:0
Module parse failed: Unexpected token (1062:0)
You may need an appropriate loader to handle this file type.
|
|
> .passive-day
| pointer-events: none;
| #app
# ./public/vue/applicationform/App.vue?vue&type=style&index=0&lang=sass& 1:0-130 1:146-149 1:151-278 1:151-278
# ./public/vue/applicationform/App.vue
# ./public/vue/applicationform.js
ERROR in ./public/vue/onboard/Onboard.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/onboard/Onboard.vue?vue&type=style&index=0&lang=sass&) 1065:0
Module parse failed: Unexpected token (1065:0)
You may need an appropriate loader to handle this file type.
|
|
> .cov-datepicker:hover
| border: 2px solid #d3d3d3 !important;
| .cov-datepicker:focus
# ./public/vue/onboard/Onboard.vue?vue&type=style&index=0&lang=sass& 1:0-134 1:150-153 1:155-286 1:155-286
# ./public/vue/onboard/Onboard.vue
# ./public/vue/onboard.js
ERROR in ./public/vue/reconboard/RecOnboard.vue?vue&type=style&index=1&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/reconboard/RecOnboard.vue?vue&type=style&index=1&lang=sass&) 1090:0
Module parse failed: Unexpected token (1090:0)
You may need an appropriate loader to handle this file type.
|
|
> .class1
| background-color: red;
| .class2
# ./public/vue/reconboard/RecOnboard.vue?vue&type=style&index=1&lang=sass& 1:0-137 1:153-156 1:158-292 1:158-292
# ./public/vue/reconboard/RecOnboard.vue
# ./public/vue/reconboard.js
ERROR in ./public/vue/console/Console.vue?vue&type=style&index=0&lang=sass& (./node_modules/vue-loader/lib??vue-loader-options!./public/vue/console/Console.vue?vue&type=style&index=0&lang=sass&) 1787:0
Module parse failed: Unexpected token (1787:0)
You may need an appropriate loader to handle this file type.
|
|
> .class1
| border: solid !important
| border-color: red !important
# ./public/vue/console/Console.vue?vue&type=style&index=0&lang=sass& 1:0-134 1:150-153 1:155-286 1:155-286
# ./public/vue/console/Console.vue
# ./public/vue/editp.js
This is my webpack configuration file
module.exports = {
mode : process.env.NODE_ENV || 'development',
context: __dirname + "/public/vue",
entry: {kras: "./applicationform.js", edit: "./editp.js", reconboard: "./reconboard.js", jobpost: "./jobPost.js", register: "./register.js",
onboard: "./onboard.js", signin: "./signin.js", recdash : "./recDash.js", consent : "./consent.js", onboardconsent : "./onboardconsent.js",
projectscreen: "./projectscreen.js" },
plugins: [
new CleanWebpackPlugin(['public/dist']),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "[name].bundle.js",
chunkFilename: "[name].[chunkhash].js"
}),
],
output: {
path: __dirname + "/public/dist",
filename: "[name].bundle.js",
chunkFilename: "[name].[chunkhash].js"
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
plugins : ['lodash'],
}
},
{
test: /\.pug$/,
oneOf: [
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
{
use: ['raw-loader', 'pug-plain-loader']
}
],
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(scss|css)$/,
oneOf: [
{
resourceQuery: /lang=sass/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
]
},
{
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
{
test: /\.vue$/,
loader : 'vue-loader',
options : {
loaders : {
scss: 'vue-style-loader!css-loader!sass-loader',
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
}
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.jsx', '.css'],
modules: [
__dirname + '/public/vue',
'./node_modules'
]
},
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, 'public'),
compress: true,
port: 3000,
disableHostCheck: true,
hot: true
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
minimizer: [new UglifyJsPlugin()]
}
}
This is my vue code
<template lang="pug">
// My pug Code over her
</template>
<script>
// My script over here
</script>
<style lang="sass">
#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
h1, h2
font-weight: normal
ul
list-style-type: none
padding: 0
li
display: inline-block
margin: 0 10px
a
color: #42b983
.list-enter-active, .list-leave-active
transition: all 1s
.list-enter, .list-leave-to
opacity: 0
transform: translateY(30px)
</style>
I just embed google font to the global setting in nuxt.config.js
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
But how to apply this font to every page .
New answer
Use #nuxt/google-fonts package: https://google-fonts.nuxtjs.org
It's trivial to use and supports a bunch of options including downloading the fonts.
Old answer
If you want to include the font within your app so you're serving it
Download the font from: https://fonts.google.com/specimen/Roboto?selection.family=Roboto (Open the drawer and download the .zip file).
Unpack the contents of the .zip into ./assets/fonts/* (create it if it does not exist).
Create ./assets/fonts/roboto.css and place the following in it:
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
(You can find this CSS by going to https://fonts.googleapis.com/css?family=Roboto).
Then change nuxt.config.js to include the CSS file in the css property:
module.exports = {
/*
** Global CSS
*/
css: [
'~/assets/fonts/roboto.css'
]
}
Then you apply font-family: 'Roboto', sans-serif; to your text elements.
Using the font on every page
Create a ./assets/css/styles.css file with the following in it:
body
{
font-family: 'Roboto', sans-serif;
}
Then as above include the CSS file in the nuxt.config.js:
module.exports = {
css: [
'~/assets/fonts/roboto.css',
'~/assets/css/styles.css'
]
}
Same applies for any asset like other fonts, icons, framework css etc.
QUICK
In your nuxt.config.js fi
head: {
...
...
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Lato:400,700'
}
]
}
And in your layouts/default.vue or any other layout file that you are using add the style tag
<style scoped>
#app {
font-family: 'Lato', sans-serif;
}
</style>
It is simple like this
Go to Google fonts and select your font style e.g Montserrat
Got to nuxt.config.js and add your font url as shown here
export default {
head: {
meta: [],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat&display=swap"'}
]
}
Go to your nuxt project -> layouts directory -> default.vue file and add class named app ( or whatever name you want) in v-app tag as shown here
<v-app dark class="app">
--your app goes here --
</v-app>
In the same file style option add the following lines in the class body you defined above
<style>
.app{
font-family: 'Montserrat', sans-serif;
}
</style>
Make sure class is defined in v-app tag and use <style> and not <style scoped> to take effect of whole project
Update your CSS with the following rule:
body {
font-family: 'Roboto', sans-serif;
}
If you don't have CSS stylesheet setup yet, create a new file in assets directory named i.e. main.css. Inside it put the code above and save it. Then edit nuxt.config.js adding this piece of code after head object:
css: [
'#/assets/main.css'
],
I tried many ways to add a custom font to a nuxt + vuetify project but no one worked correctly.
Finally I created a global.scss in assets folder file and addressed it in nuxt.config.js:
css: ['~assets/global.scss'],
and in global.scss file:
#font-face {
font-family: 'my-custom-font';
src: local('my-custom-font'), url('path/to/font') format('truetype');
}
.v-application {
font-family: 'my-custom-font' !important;
}
// or
#app {
font-family: 'my-custom-font';
}
This worked correctly.
you can do these steps:
1__define your font in as a custom varriable in a seprated file in your assests directory,for example variables.scss, like this:
$body-font-family: Roboto;
#import '~vuetify/src/styles/styles.sass';
2__then in the nuxt.config.js,you should add a stylesheet link in the head, like this:
head: {
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald|Libre+Baskerville&display=swap' }
]
},
3__then it is neccessary to enable treeshaking in the vuetify and set your customvariables,like this:
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true
},