I want to change my document direction and language, but don't want to do that with JS. how can I do that?
Is there any config for that?
how to set document direction to RTL?
<!doctype html>
<html dir="rtl" lang="fa">
<!-- another tags -->
</html>
Nuxt3 use #vueuse/head. You don't need to download, it's already in Nuxt3.
It will be something like that:
useHead({
htmlAttrs: { dir: 'rtl', lang: 'fa' },
})
Works well with SSR in Nuxt3.
Also, you can hard code it in your nuxt.config.ts if you don't need more languages:
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: { dir: 'rtl', lang: 'fa' },
},
},
})
Related
We are using Vite and would like to manually load an external CSS file. Internally to the project we are using CSS modules. We need the external CSS file to load after the CSS generated by CSS modules.
In vite.config.js I have tried to add a plugin that adds the stylesheet link to the head section as follows.
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform(html, ctx) {
return [{
tag: "link",
attrs: {"rel": "stylesheet", "type":"text/css", "href": "/*<link to css>*/"},
injectTo: "head"
}]
}
}
}
}
However, this always results in the stylesheets generated by CSS modules to be appended to the head after the external CSS:
<head>
...
<link rel="stylesheet" type="text/css" href="/public/external-css.css">
/* styles generated by CSS modules */
</head>
We don't want this, as the external CSS sets some CSS variables.
How can we force the external stylesheet to be added to the end of the head section?
The problem only occurs while using the dev server (and not in a build). Since the CSS module styles are always appended to <head> in the dev server, you can ensure your <link> is after those styles by injecting into the beginning of <body>. This should be done for the dev server only (in which case the plugin's ctx.server exists), as Vite already appends the <link> correctly to <head> in production builds:
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform(html, ctx) {
return [{
tag: "link",
attrs: {"rel": "stylesheet", "type":"text/css", "href": "/*<link to css>*/"},
injectTo: ctx.server ? "body-prepend" : "head", 👈
}]
}
}
}
}
demo
I am trying to use react-slick inside a NextJs project. The carousel works fine but I have some problems importing the fonts used in the css files.
I have tried the following:
npm install slick-carousel
and imported the css in the component where the react-slick module is used:
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
When i run the application I get the following error in the network log:
404 Not found on both slick.woff and slick.ttf
I found some other responses where they have added the following to the next.config.js:
const withSass = require('#zeit/next-sass')
const withFonts = require('next-fonts');
const withCss = require('#zeit/next-css')
module.exports = withFonts(withSass(withCss({
env: {
environment: 'development'
},
enableSvg: true,
webpack: function (config) {
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]'
}
}
})
return config
},
cssLoaderOptions: {
url: false
},
})))
I've tried both with and without the withFonts module.
If i add the direct urls in the <Head>it will work:
<Head>
<>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
</>
</Head>
But will rather get the fonts to work instead.
Anyone with some suggestion to get the fonts to load in Nextjs?
Not a solution, but I solved it another way.
As I am going to style most of the stuff that requires fonts, i decided to just copy the css from slick-carousel and delete all font references. Override arrow left, arrow right as well as the dots.
Not a solution on the problem stated above but fix my issue.
Pasting both files in public directory with next font installed should resolve 404 error
I am trying to generate a static website out of my (minimal) code with Nuxt. In that code, I integrate in particular the tailwindcss toolkit as well as vue2-leaflet. Upon
nuxt generate
I get two css files, one for the tailwindcss css and the other for the leaflet css. While the former file is fine and contains everything I need, the latter is pretty sparse:
.leaflet-tile-pane{z-index:200}#-webkit-keyframes leaflet-gestures-fadein{to{opacity:1}}#keyframes leaflet-gestures-fadein{0%{opacity:0}to{opacity:1}}
Of course, that makes my map render in a pretty strange way, because most of the css is missing. Here's my current nuxt.config.js:
module.exports = {
mode: 'universal',
head: {
title: pkg.name,
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' }
]
},
css: [
],
plugins: [
{ src: '~plugins/leaflet.js', mode: 'client' }
],
buildModules: [
'#nuxtjs/tailwindcss'
],
modules: ['#nuxtjs/apollo', 'nuxt-purgecss', ['nuxt-i18n', i18n]],
[...]
build: {
extractCSS: true,
}
}
Getting rid of the extractCSS ends up incorporating all the relevant css into the index.html. It works, but then I get the following error:
ERROR Webpack mode only works with build.extractCSS set to *true*. Either extract your CSS or use 'postcss' mode
I'm not sure I understand how that whole css extraction works. Could someone enlighten me? Why is it not working with extractCSS: true? How can I make it work? Why is it working in SPA mode but not in static mode?
You are using nuxt-purgecss which is using purgecss to strip unused CSS.
purgecss do scan HTML (or vue) files for CSS classes in use and then strip unused classes from final CSS bundle.
You can take a look at default purgecss configuration used by nuxt-purgecss here. The paths lists the paths purgecss will scan for CSS usage.
Because you are not using most of the leaflet css directly (in your components), its is necessary to configure purgecss to don't remove leaflet's css.
You can do that by whitelisting (btw not sure if "comment" method will work in Vue\Nuxt)
You can read more here and here
Not tested!!
// nuxt.config.js
{
purgeCSS: {
whitelistPatterns: [/leaflet/, /marker/]
}
}
Regarding the error message
Error message is from nuxt-purgecss module - it is clearly documented here
I don't have deep knowledge of Nuxt build process. So I just assume from the docs that extractCSS: true will use extract-css-chunks-webpack-plugin to extract all CSS to separate CSS file, while (default) extractCSS: false will use PostCSS to extract all CSS and put it directly into the <style> tag of rendered page.
All of that doesn't matter IMHO because the root problem is the use of purgecss and the solution is to configure it correctly to whitelist leaflet CSS classes....
I am getting the error: "Uncaught referenceError: App is not defined" in my JS console when loading this Enyo app on my localhost. I am brand new to Enyo so I am still trying to learn the concepts of kinds and components.
app.js (in source folder):
enyo.kind({
name: "App",
kind: "FittableRows",
classes: "enyo-fit enyo-unselectable",
components: [
{
kind: "onyx.Toolbar",
layoutKind:"FittableColumnsLayout",
components: [
{
kind:onyx.Button,
style:"width:80px;background:green;",
ontap:"handleBtnBack",
content:"Back"
},
{
content:"Header",
style:"text-align:center;",
fit:true
},
{
kind:onyx.Button,
style:"width:80px;background:red;",
ontap:"handleBtnNext",
content:"Next"
}
]
},
{
kind: "Scroller",
horizontal:"hidden",
touch:true,
fit:true,
thumb:true,
components:[
{
tag:"h1",
//This is how we insert css class.
classes:"padding15px",
content:"This is content area...Hello World!!!"
}
]
},
{
kind: "onyx.Toolbar",
// The footer
layoutKind:"FittableColumnsLayout",
components:[
{
kind:"onyx.Button",
content:"Go Next Page",
ontap:"handleBtnNextPage",
fit:true
}
]
}
],
create: function(){
this.inherited(arguments);
console.log("App is created in memory");
},
rendered : function(){
this.inherited(arguments);
console.log("App is created in rendered into DOM");
},
handleBtnNextPage : function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnNext: function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnBack: function(inSender,inEvent){
//For each enyo event handler comes with inSender, the control that sends the event and the inEvent the actual event itself.
alert("Back Button");
}
});
package.js (in source folder):
enyo.depends(
// Layout library
"$lib/layout",
// Onyx UI library
"$lib/onyx", // To theme Onyx using Theme.less, change this line to $lib/onyx/source,
//"Theme.less", // uncomment this line, and follow the steps described in Theme.less
// CSS/LESS style files
"../assets/css/app.css",
// Include our default entry point
"App.js",
"Page2.js"
);
index.html (in root folder):
<!--My Copy-->
<!DOCTYPE html>
<html>
<head>
<title>IsGoodStuff.com Tutorial #2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="assets/favicon.ico"/>
<script src="enyo/enyo.js" type="text/javascript"></script>
<!-- -->
<script src="package.js" type="text/javascript"> </script>
</head>
<body>
<script type="text/javascript">
new App().renderInto(document.body);
</script>
</body>
</html>
If your index.html is in your root folder, but the main package.js is in the source folder, it's probably your script tag that loads package.js. Try:
<script src="source/package.js" type="text/javascript"> </script>
You haven't supplied Page2 but it appears the code would work as-is.
Here's a fiddle showing the working page: http://jsfiddle.net/kgxvg7Lw/1/
Some thoughts:
1) Are you using a case-sensitive file system? You show app.js but your package.js has App.js (capitalized).
2) Are you certain there are no parse errors in the console?
Now, that said... You probably don't want to reload a new app for every 'page' switch. Usually, you would use something like Panels to allow the app to control the content that appears on the screen and just navigate among the panels as needed.
I am trying to create a very simple HTML page with Polymer, which includes an HTML file with all the components I need:
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="components/my-element.html">
my-element.html looks like this:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
// Some HTML
</template>
<script>
Polymer({
is: 'my-element',
properties:{
// properties
}
});
</script>
</polymer-element>
When I run it as it is, everything works fine.
When I try to Vulcanize the components.html file, and then open the same page with the Vulcanized version, I get the following error in the console
"Uncaught TypeError: prototype.registerCallback is not a function"
I have noticed the Vulcanize process turns
Polymer({
is: 'my-element',
properties:{
// properties
}
});
Into
Polymer('my-element', {
is: 'my-element',
properties:{
// properties
}
});
Which seems to be what is causing the bug, as window.Polymer only expects an Object as a parameter.
I am using grunt-vulcanize to do the actual Vulcanizing, and my config looks like this:
vulcanize: {
default: {
options: {
excludes: {
imports: [
'polymer.html'
]
},
'strip-excludes': false,
inline: true,
strip: true
},
files: {
'build.html': 'components.html'
},
},
}
Is there a way of stopping this?
I am using Polymer 1.0, and grunt-vulcanize 0.6.4
Got it: I was using <polymer-element> instead of <dom-module>. <dom-module> is correct for Polymer 1.0.
This guide is useful, and has taken me days to find, if only so that you know what works with 0.5 and what works with 1.0:
https://www.polymer-project.org/1.0/docs/migration.html
grunt-vulcanize is not compatible with vulcanize 1.8.1, because last update on github was on Feb 9 with version 0.6.4. It's out of date plugin for Polymer 0.8+.
temporary adaptation for grunt-vulcanize which works with vulcanize ^1.8.1 and Polymer 1.0.
https://github.com/kgadzinowski/grunt-vulcanize/
just change in package.json:
"grunt-vulcanize": "kgadzinowski/grunt-vulcanize"
it'll work fine