Hot reload is not working in Vue3 and tailwind application.
If I am changing the code(using vscode editor) and respective data is not changed in the browser. I need to logout and login again to see the new changes.
My package.json
"vue": "^3.0.0"
"#vue/cli-service": "~4.5.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.1.2"
Please help me how to fix this issue.
Thanks in advance
Related
I am building an application with Symfony 4 and I'd like to follow the best practices for web assets. I use Encore/Webpack for SCSS and JS and it works well; the resulting JS+CSS are nicely stored in /public/build folder. I'm stuck at how to store and use static assets like images, movies, sounds.
Should images be stored in 'public/images' folder or in 'assets/images'?
And some followup questions:
If the images are stored in public/images, will I get any benefit if I pollute the templates with asset('...') calls?
If the images are stored in assets/images, then:
How are they moved into public/images to be served via http? ./bin/console assets:install did nothing, saying: '[OK] No assets were provided by any bundle.'.
How do I use them in SCSS? Via relative paths?
Regards,
Should images be stored in 'public/images' folder or in 'assets/images'?
Everything in public/ is available through the browser. In here, only production ready and build things should be put.
As your images don't need any processing (I assume), you can (should) indeed put the images there.
Now, assume you're needing to do some processing (e.g. ugly JPEG compression), you would put the images in assets/, do some processing and then put only the processed images in public/.
If the images are stored in public/images, will I get any benefit if I pollute the templates with asset('...') calls?
Yes, asset() doesn't have anything to do with Encore or asset build management. The only thing it does is fixing your URLs. This means that if you move your app to sub directories on your server (example.com/app/), the URLs will automatically adapt. Read more about it in the Asset component documentation.
Another good way to reference images with asset() method in Symfony 4 is copying images in public/build when building assets with Encore.
Use copyFiles() in Webpack Encore
Webpack Encore provides a function to copy your images on the public directory to allow asset() to access those files : copyFiles().
In your webpack.config.js
Encore.
...
.copyFiles({
from: './assets/images',
to: 'images/[path][name].[ext]',
pattern: /\.(png|jpg|jpeg)$/
})
Error: Encore.copyFiles is not a recognized property or method.
Please by sure that you are actualy using symfony/webpack-encore-bundle and not
symfony/webpack-encore-pack as described here.
composer require symfony/webpack-encore-bundle
composer remove symfony/webpack-encore-pack
yarn install
yarn upgrade
yarn run watch
My package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.22.0",
"bootstrap": "^4.1.3",
"node-sass": "^4.10.0",
"sass-loader": "^7.0.1",
"url-loader": "^1.0.1",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
Edit webpack.config.js after
Encore
.setOutputPath('../build/')
Add the following lines. You can also do more configuration by uncommenting the lines
.enableVersioning()
.copyFiles({
from: './assets/images',
// optional target path, relative to the output dir
to: 'images/[path][name].[ext]',
// if versioning is enabled, add the file hash too
//to: 'images/[path][name].[hash:8].[ext]',
// only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
Now you can use image by
Source: https://symfony.com/doc/current/frontend/encore/copy-files.html
Details: http://toihid.com/?p=332
I have an angular application built in Visual Studio 2017. I'm using npm, gulp, and browserify to help me manage dependencies, bundling, and minification. Everything had been going along well until I tried to pull in moment, moment-timezone, and angular-moment, when I started having trouble getting these libraries to play nice.
I'm assuming that the issue is related to the way these libraries are being included in my application due to some mistake or bug with the way I'm using npm, gulp, browserify, or the require('...') statements. So, it seems like it'd be helpful for me to explain how I'm doing that.
First, in VS, I added a node configuration file to the project (package.json) and it contains a list of all of my dependencies that will be installed through npm. So, for example, my package.json looks something like this:
{
"property": value,
"otherProperty": otherValue,
"dependencies": {
"angular": "1.5.8",
"angular-ui-router": "1.0.3",
"jquery": "3.1.0",
"moment": "2.18.1",
"moment-timezone": "0.5.13",
"angular-moment": "1.0.1"
}
}
Now, that makes npm go ahead and download everything and stick it in my node_modules folder, but it doesn't actually include anything in my application. So there's a gulp task similar to the following:
var dependencies = Object.keys(packageJson && packageJson.dependencies || {});
browserify({cache: {}, packageCache: {} }})
.require(dependencies)
.bundle()
.pipe(source(js/siteLibs.js))
.pipe(buffer())
.pipe(gulp.dest("."));
Ok, so if that gulp task works correctly, I'll have a file called siteLibs.js that contains all of the js from my npm dependencies, and then I can just make a single script tag to reference siteLibs.js.
The next part, I'm a little hazy on, but do I still have to have an actual require('...') statement in my app for moment, angular-moment, and moment-timezone? If it is required, why? What is it doing?
Now, once at this point, I should be able to go ahead and let my angular app take a dependency on moment, moment-timezone, or angular-moment, and, indeed I can. The issue is that when I call moment.locales(), which is supposed to return a list of all loaded locales, it has naught but 'en-US'. Ok, that's expected because I never loaded any locales. So if I go in my app and say:
require('moment/locales/en-gb');
require('moment/locales/en-au');
require('moment/locales/fr-ca');
It makes no difference. The only loaded locale is en-US. What is the right way to go about getting those additional locales loaded given that I'm using npm, gulp, and browserify?
Refer to this in moment's documentation
https://momentjs.com/docs/#/use-it/browserify/
I'm making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:
Failed to mount component: template or render function not defined.
(found in component <input-tag>)
Any ideas? I'm going crazy.
Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf
Thanks!
I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.
Here's more info from the 2.x docs:
http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.
To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.
I did the following:
npm install --save-dev aliasify
edited the package.json to include this code:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
}
added -t aliasify to my browserify command, which now reads:
browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js
You can do this with webpack also--and there's info in the Vue.js docs for that.
I hope that helps!
I am trying to setup a basic ionic 2 leaflet app using ionic 2.0.0-beta.24 and leaflet 0.7.7. After starting the default project with
ionic start test --v2 --ts
if you open the ionic.config.js file you will see the message
Ionic CLI is no longer responsible for building your web assets, and now
relies on gulp hooks instead. This file was used for exposing web build
configuration and is no longer necessary.
If this file is executed when running ionic commands, then an update to the
CLI is needed.
If your version of the Ionic CLI is beta.21 or greater, you can delete this file.
In older versions of ionic 2 you would put the directories you would want to include in this file like this:
sass: {
src: ['app/theme/app.+(ios|md).scss'],
dest: 'www/build/css',
include: [
'node_modules/ionic-framework',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
},
Now i guess that isn't an option, so how do i bring in the css stylesheet i need, because doing #import "leaflet"; in app.core.scss errors out because it can't find the folder.
Any help would be greatly appreciated. I am able to use the Leaflet js library because i did.
npm install --save leaflet
typings install --ambient --save leaflet
The map is loading without an issue, but the tiles are scrambled which is a sign the css sheet is not loaded. If i put in a stylesheet link in it works without an issue, but i would prefer not to have to rely on a CDN.
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
Thanks.
So just by posting this question it made me start tracing the documentation for ionic gulp sass-build task.
The example they provide was a great help. If I update the default gulpfile.js code around line 55 from:
gulp.task('sass', buildSass);
to
gulp.task('sass', function(){
return buildSass({
sassOptions: {
includePaths: [
'node_modules/ionic-angular',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
}
})
});
It solves my issue. I also needed to call #import "leaflet" in the page that needed the leaflet css.
I am trying to find a way to intall gruntjs without internet access. Is there a way to download an installer? Stack overflow is giving me a hard time about the format of this question and I"m not sure what else to write. It's a pretty straightforward request.
Sort of. You'll need internet access at some point to acquire the Grunt source from Github. Grunt is a node module, and therefore needs to installed to the node_modules folder in your project. You can do this via npm, but you can also obtain the source for the module and copy it directly into the folder.
Go to: https://github.com/gruntjs/grunt to acquire the Grunt source code, and move it to your node_modules folder.
This will install grunt... but you'll still have problems. Grunt has many dependencies, listed here: https://github.com/gruntjs/grunt/blob/master/package.json
"dependencies": {
"async": "~0.1.22",
"coffee-script": "~1.3.3",
"colors": "~0.6.0-1",
"dateformat": "1.0.2-1.2.3",
"eventemitter2": "~0.4.9",
"findup-sync": "~0.1.0",
"glob": "~3.1.21",
"hooker": "~0.2.3",
"iconv-lite": "~0.2.5",
"minimatch": "~0.2.6",
"nopt": "~1.0.10",
"rimraf": "~2.0.2",
"lodash": "~0.9.0",
"underscore.string": "~2.2.0-rc",
"which": "~1.0.5",
"js-yaml": "~2.0.2",
"exit": "~0.1.0"
},
"devDependencies": {
"temporary": "~0.0.4",
"grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-bump": "git://github.com/gruntjs/grunt-contrib-bump#b9bfc07",
"difflet": "~0.2.3",
"semver": "2.1.0",
"shelljs": "~0.2.5"
}
}
Each one of these dependencies would also need to be manually installed in the same fashion into a node_modules folder inside of your projects' node_modules/grunt folder. Each of those dependencies may have dependencies of their own, so you would then have to follow the same procedure there.
Because of this, while it's technically feasible to install Grunt without using npm it's certainly not practical.
You can install node on another machine, zip up your node_modules directory and send it to yourself (email, dropbox, whatever channel you have open), and then unpack it on the machine. 7-zip compressed it to about 1.3mb for me.