I am using Vue 2.0 and Vue CLI 3.0. I am trying to get the favicon.ico/png file work properly and am having no luck at all.
I have narrowed the issue to the following.
The index.html file generated by yarn build converts this line of html code:
<link rel="icon" href="favicon.png" >
to...
<!--[if IE]><link rel="icon" href="favicon.png"><![endif]-->
If I go into Chrome developer tools and change the line back to the way I had it originally, the ico/png file renders as expected.
My question is: how do I fix this so that yarn build stops messing up my html code.
Inside the vue.config.js set the PWA options for the icons to point to whatever icons you want. Specifically, set pwa.iconPaths for example:
module.exports = {
pwa: {
iconPaths: {
favicon32: 'img/icons/myFavicon.png',
}
}
}
See
https://cli.vuejs.org/config/#pwa
https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
Related
I'm using Express/Node with Pug as the view template. Attempting to use Tailwind for styling, but have been unable to get Tailwind to modify my CSS based on the classnames added in the Pug files. Has anyone run into this before?
Here is the Pug file where I'm attempting to modify how "Testing tailwind" will display. However, it loads with black plain text.
I was able to populate my style.css file with the tailwind boilerplate base, components, and utilities. If I style the class name in styles.css it works, so the file is linked correctly...
Most likely Tailwind was not render. In this article and this video show how to do it.
You must install tailwindcss postcss autoprefixer postcss-cli
npm install tailwindcss postcss autoprefixer postcss-cli
Create postcss.config.js
module.exports =
{
plugins:
{
tailwindcss: {},
autoprefixer: {},
},
}
and tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports =
{
content:
[
'./views/*.{pug, html}',
],
theme:
{
extend:
{
},
},
plugins:
[
],
}
And public/styles/tailwind.css css file within
#tailwind base;
#tailwind components;
#tailwind utilities;
To package.json add script
"tailwind:build": "postcss public/styles/tailwind.css -o public/styles/style.css",
And now you can build tailwind for your pug templates or some other html files. Just run npm run tailwind:build and open your host
But for don't running again and again this script you can watching for files with this script
"tailwind:watch": "postcss public/styles/tailwind.css -w -o public/styles/style.css"
Just run npm run tailwind:watch and your css file will be updating on change tailwind.css file
module.exports = {
content: ["./**/*.pug"],
theme: {
extend: {},
},
plugins: [],
};
try like this:
I recently encountered this problem. I was following this video and at the end, tailwind didn't seem to work at all.
After looking at document, I tried a new approach and it worked:
Instead of:
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
title Node.js with TailwindCSS, Express and Pug
// Injecting css file as the tutorial
link(href="./styles/style.css", rel="stylesheet")
body
h1 Hello world!
p My starter template
Try this:
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
title Node.js with TailwindCSS, Express and Pug
// Follow the document
style
include ../public/styles/styles.css
This worked out for me, I hope this helps some of you.
Happy coding!
Super basic question: I want to install and use the Leaflet module in my Sails.js project. First thing, I install it in using npm i leaflet --save. This successfully updates the dependencies list in the package.json file.
To use it, I write the following code inside a page script:
mounted: async function() {
//…
console.log('hello world!!!!');
var leaflet = require("leaflet");
},
Sails.js complains: Uncaught (in promise) ReferenceError: require is not defined.
Why? If I need to create a hook first, what would it need to contain?
Modules installed through the package manager npm are to be used in the server-side of things (controllers, actions, etc.), not in the browser.
You could use solutions such as Browserify or Webpack, but in this case it's just better to download Leaflet from the website and add the folder under assets/dependencies.
Finally, you can import the JavaScript Leaflet files in layout.ejs (inside the views/layouts folder):
<% /* Auto-injected «script» tags: */ %>
<!--SCRIPTS-->
// ...
<script src="/dependencies/leaflet/leaflet.css"></script>
And for CSS:
<% /* Auto-injected «link» tags: */ %>
<!--STYLES-->
// ...
<link rel="stylesheet" href="/dependencies/leaflet/leaflet.css">
I would guess this is the best approach as the Sails.js starter template is importing Boostrap 4 in the same way.
You don't have to require anything, once you npm installed it just add the leaflet.js, leaflet.markercluster.js and leaflet.css in your header and you're done.
You can use the short example of init map from their site and it'll work.
I'm very new to svelte ( like many of us ^^ ), and I didn't manage to add bootstrap to my app. Tried to run 'npm add bootstrap' but it said that I need peer jquery dependencie. Here is the terminal render
What I don't understand is why the package has been added and I can't still use the bootstrap classes. Second point, why does it talk about peer dependencies? What's the link here?
I don't know if I'm missing something but if you guys got the solution it will help a lot. Thank you
npm add bootstrap
npm WARN bootstrap#4.4.1 requires a peer of jquery#1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN svelte-app#1.0.0 No repository field.
npm WARN svelte-app#1.0.0 No license field.
+ bootstrap#4.4.1
added 1 package from 2 contributors and audited 9125 packages in 8.047s
found 0 vulnerabilities```
Your problem is that installing bootstrap into node_modules doesn't automatically include the files in your application. There are a few different ways you can accomplish this.
Option 1: Copy the files to /public manually
Download the bootstrap files and place them inside the public folder of your svelte project.
Add the css link in public/index.html. <link rel='stylesheet' href='bootstrap/dist/css/bootstrap.min.css'>.
The downside of this approach is that you will need to commit the bootstrap folder to your version control system, which is generally frowned upon.
Option 2: Copy the files to /public using rollup
install rollup-plugin-copy
Update rollup.config.js to include the copy plugin. Here is a snippet of the important parts from a rollup.config.js file from a fresh svelte install.
//...
import copy from 'rollup-plugin-copy'
export default {
//...
plugins: [
//...
copy({
targets: [{
src: 'node_modules/bootstrap/dist/**/*',
dest: 'public/vendor/bootstrap'
}]
}),
//...
],
//...
};
Add the css link in public/index.html. <link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
This answer is an addition to the accepted answer's second option. (I cannot comment yet..)
Instead of copying all of Bootstrap's files to the public folder, you can also pick and choose. For example, I only needed the minified CSS and the bundled minified JavaScript, so I configured the copy plugin like this:
//...
import copy from "rollup-plugin-copy";
export default {
//...
plugins: [
//...
copy({
targets: [
{
src: "node_modules/bootstrap/dist/css/bootstrap.min.css",
dest: "public/vendor/bootstrap/css",
},
{
src: "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
dest: "public/vendor/bootstrap/js",
},
],
}),
//...
],
//...
};
The CSS can be included in the <head> tag in public/index.html:
<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
The JavaScript can be included inside of the <body> tag (at the end) in public/index.html:
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
There is also sveltestrap as one of the Svelte Society design systems
I successfully added Bootstrap 5 to my Svelte project, here is how to do this:
You need to have Svelte project, see for Svelte and for SvelteKit
Enter the project directory.
Run npm install or yarn (if you prefer yarn) to download dependencies listed in package.json.
Then add Bootstrap with npm install bootstrap (or npm i bootstrap) or yarn add bootstrap. You can specify version if you want. Its folder will appear among other dependencies in node_modules.
Since Bootstrap requires popper.js and jQuery we also need to add them:
npm i #popperjs/core jquery.
Now that we have Bootstrap installed (its source code is in node_modules folder) we need to link it to our application. Since Svelte app is basically an html page we can simply add links to Bootstrap CSS and JS in src/app.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Using aliases for node_modules is not preconfigured in vite.config.js by default.
That's it, this worked for me.
I have created my project with vue-cli, running 'vue init webpack project-name'. I cannot figure out how to change the page title and the favicon displayed.
Somehow the page title is always 'Vue App' and favicon is the Vue logo. How do I change these? They seems to be generated from somewhere in the webpack config, but I cannot figure out where.
I fixed this by creating a public folder to the project root. Then I moved my index.html and favicon into the public folder.
//This is in the index.html head
<link rel="icon" type="image/png" href="/favicon.png" />
If you're using vue-cli, this is the only way I could find to get the page title to not unprofessionaly flash "Vue App" on load. If someone finds an easier solution, please share!
Create custom-index.html with your own title, then in vue.config.js:
const HTMLWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
new HTMLWebpackPlugin({
showErrors: true,
cache: true,
template: path.resolve(__dirname, 'src/custom-index.html'),
})
],
I am trying to get vue.js source code for production.
I used this command npm run build. I got a dist folder with index.html and a folder named static with all css and js.
When I tried running the index.html in localhost, ie, xampp server I got a blank page .
Is it possible with vue.js to run in xampp.
First create vue.config.js file in project root directory and define base url in it using below code
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/'
}
If you use Vue CLI 3.3 or higher, use
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ?
'/production-sub-path/' :
'/'
}
Replace production-sub-path with your folder name ... eg. http://www.example.com/production-sub-path/ ... and run below command to build the project
npm run build
After finishing the build ... Copy/Upload all files in dist folder to your /production-sub-path/ folder... That's it
For more info checkout the official documentation
https://cli.vuejs.org/guide/deployment.html#general-guidelines
I had this issue before as well. I solved it by making a change to the index.js file in the config folder. Under build, I changed:
assetsPublicPath: '/',
to
assetsPublicPath: '',
and tried npm run build again. I checked the dist file and opened the index.html and it worked, no blank page.
I had the same issue, and I solved the problem by deleting the "/" from the dist/index.html file. I had something like this:
<script src=/js/app.632f4e30.js></script>
And I change it to:
<script src=js/app.632f4e30.js></script>
I created vue.config.js next to the file package.json
With the following content:
module.exports = {
publicPath: ''
}
And run
npm run build
It solved my problem
The following links helped me
https://github.com/vuejs-templates/webpack/issues/310
https://cli.vuejs.org/config/#vue-config-js
Usually when you do a production build the paths that get set in the index.html file prepend a slash in front of it meaning that it will look for the file in the base domain. So im guessing your just trying to open the file in the browser by double clicking the index.html file and having it open in the browser.
Something like
file:///Users/brianvoelker/Desktop/websites/vue-build/docs/index.html
So in that example it is trying to look for files in file:/// and of course the dont exist.
So you can do either two things open the index.html file and remove the slash at the beginning or just know when you deploy that it will work because the files lookup are relative to the base domain.
P.S. If your looking for a cli build tool check out Vue-build.com
Vue.js is a browser side app framework. The server side technology does not matter, unless you are attempting to do server side rendering.
npm run build works perfectly alright, and it creates a minified set of files for manifest.#.js, vendor.#.js and app.#.js
Open the network tab in developer tools of Google Chrome to see what files are getting loaded. If any of the js files are not getting loaded, it is a path configuration that you need to do, so that your server serves the right files.
You may have to tweak the index.html file a bit so that it fully meets your requirements, and move the js files from dist/static folder to your preferred location. The url path does not matter, as long as the app files are served in the right order.
I encountered a similar issue and the above info helped me. However, I found that if you edit the index.js file in the config folder for the VueJS CLI webpack tooling and edit the 'assetsPublicPath:' variable to './' from the default '/' then future builds will find the correct references to the css and js files in the static folder.
I have solved this by adding this code under root directory,
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}
or you can remove first '/' from index.html file that has been created under dist.
example href=/js/chunk-vendors.7a32d01e.js to href=js/chunk-vendors.7a32d01e.js
I had the same situation with a different issue, I used the vuejs-webpack-project project and tried running the output files under an IIS server.
This code in index.html didn't work:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>vuejs-webpack-project</title>
<link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
<div id=app />
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js />
<script type=text/javascript src=/static/js/vendor.4ad267b4786a3ebd3327.js />
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js />
</body>
</html>
This code worked(needed to change the closing tags of the script elemet):
<body>
<div id=app />
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.4ad267b4786a3ebd3327.js></script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js ></script>
</body>
Open vue.config.js you see the following code.
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
update code to this
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath:''
})