I'm working on a Vue-page and have write some external Vue-Plugin my_plugin for this page. Vite is used as a builder.
For development the Vue-plugin my_plugin is linked to the host project using npm link and npm link my_plugin as described on many pages. This works quite fine and changes in my_plugin are applied instantaneously.
So I would be thankful if anyone could give me some information about how to use them in my case. Maybe I have some wrong understanding about it. Or is there even a better solution? I can't publish the Vue plugin to npm due to confidential content.
Thank you in advance.
Now everything should go to production and I'm confused how to link everything. I tried some solutions:
Just typing npm run vite build from my current project folder worked fine.
I started from a fresh clone and included my_plugin as a git submodule and added npm install --save ./my_plugin (my_plugin is just in the root directory of my project). This worked as well.
Again, starting from a fresh clone but now try to use a more JS/Vite-approach to the problem by setting costum rollupOptions.extrenal in my host project. This failed after having to include all dependencies of my_plugin.
For me, the third point looks like the most promising one but fails unfortunatly. In addition I only found sparse information about working with rollupOptions.external. Maybe I don't understand rollupOptions.external usage.
I tried the following configurations in my vite.config.js:
build: {
rollupOptions: {
external: [
'my_plugin', // plugin is used withj import Some from 'my_plugin'
]
}
},
build: {
rollupOptions: {
external: [
fileURLToPath(
new URL('./my_plugin/index.js', import.meta.url) // using git submodule folder
),
]
}
},
build: {
rollupOptions: {
external: [
'./my_plugin', // plugin is used with import Some from './my_plugin' and using relative paths
]
}
},
Related
I’m working on a combined project where I want to dump the results of the compile process into the ‘dist’ directory and another directory, possibly called ‘view’.
I’ve tried configuring the vite.config.js file by adding code to the export default defineConfig section of the code, in this case simply to dump everything in the view folder, ex:
export default defineConfig({
plugins: [svelte({
build: {
outDir: "./view"
}
})],
})
I’ve also tried to use vite configuration commands in the build section and failed.
But nothing seems to work. Looking for assistance.
Some classes like text-green-500, rounded are having effect and the styling is updated.
Ohter classes, like bg-black, don't have any effect on the styling.
I am using Jetstream and TailwindCSS.
I have solve this problem before with this :
npm run prod
this might help you
There are plenty of possibilities which may cause this, but as a kind of a workaround you could use the safelist in the tailwind.config.js, as follows:
purge: {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
safelist: [
'rounded',
'text-green-500',
],
},
and don't forget to run npm run dev.
p.s. for some reason, sometimes npm run dev is not enough and I have to go for npm run watch, and ctrl+c it after the mix recompile is over. Don't know what could the reason be, but it helped.
If you add some html with tailwind CSS elements not used before then just run 'npm run dev' and that should add the CSS classes.
After that, you can start the server using 'php artisan serve'
While you're developing run npm run watch, it will refresh the CSS requirements whenever you save a page.
npm run prod is for once you have finished developing and want to put the site into production.
As suggested by #DaviMendesDev you need to run npm to compile your classes for use.
npm run dev
or
npm run prod
this will generate .css files you can use.
Using Ubuntu 16.04 and Nginx I am trying to deploy a Vue project to production but keep running against a white wall- literally.
I cloned my project to
/var/www/html/maak-web/maak_web/
Installed all needed dependencies with npm install and ran the following build script:
node build/build.js
This started the building for production which was successful and the project deployed.
In my nginx default config I changed the root to point to the correct folder like so:
root /var/www/html/maak-web/maak_web;
When I now visit my domain/IP I see that the project loads (e.g. favicon and site name loads) as well as I can access my static files from here:
https://mysitedomain.com/static
It seems the Vue project works but the problem is that it doesn't actually display anything and visiting sub views like /oneview and /anotherview throw 404 page not found errors.
Since Vue doesn't seem to throw any errors I suspect its the nginx configuration problem!?
The solution was to build the production into /dist/ folder and publish only the /dist/ folder content. Once I copied the content to /www/html/ it worked fine.
seeing that this was an error with not getting the right files to the output folder, i suggest you update your config/index.js file to include the correct production location there by setting index and assetsRoot for the build object
build: {
// Template for index.html
index: path.resolve(__dirname, '../../srv/www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../srv/www'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...
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've tried to configure uncss using grunt
I've installed
npm install grunt-uncss --save-dev
npm install grunt-processhtml --save-dev
Configuration
uncss: {
dist: {
files: { 'dist/css/clean.css': ['index.php'] }
}
}
at the end I load them in and register a default task like this :
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss', 'processhtml']);
Result
When I run grunt
at the end I keep seeing :
Running "uncss:dist" (uncss) task
Fatal error: PhantomJS: Cannot open about:blank
Update
I added :
processhtml: {
dist: {
files: {
'index.php': ['index.php']
}
}
}
Still get the same error after running grunt
If this is all of your code, you are not referencing any stylesheets to remove code from. All you are doing is telling grunt where the cleaner file should go, and to remove any unused css from index.php. However, it doesn't know where the styles for index.php live, so it has nothing to do... You need to actually configure your processhtml and tell uncss which stylesheets you would like to clean up.
Read the directions friend:
grunt-uncss github readme.md
I have that problem with my project and the solution is here:
You need update the uncss module, remember grunt-uncss is only a way to use uncss node package. In my case my version of that was in 0.12.1 and updating that package the problem was fixed. Let me know if this help you.