I am creating a wordpress site with vuejs framework. I am about to put vuejs components into this directory.
wp-content/themes/{theme}/components
The problem is, I can't import vuejs components with ES6 import App from './components/App.vue' functionality.
I tried using CDN but I don't know how importing of components works.
Does anybody know?
the are 2 main solutions for this problem:
(best): compile your project (for example with the vue-CLI) in such a way that all imports used in the project are compiled into simple, browser-readable js files
use the http-vue-loader library to load components directly from the browser (this solution works perfectly, but in terms of performance with many components it is not recommended)
Related
I guess I'll get some flak for even asking, but here we go.
I'm a full-stack web developer, and most of the projects I work in are based on WordPress. I start by developing front end mockups in CodeKit, using Pug, Sass and transpiled JS modules. It works mostly well, but it takes some self discipline and effort to keep things minimally modular, lean and clean.
I have also worked on some Vue.js projects, which I have absolulety loved. I have successfully combined both platforms, using WP as a headless CMS for Vue.js. But many WordPress projects just require a regular theme, coded in PHP with monolithic styles and scripts.
I would very much like to be able to code my mockups in Vue and somehow generate a completely static build, much like the one I get with CodeKit (or webpack, gulp, ...). All scripts bundled into a single JS file, all styles in a single CSS file. Then some other dev (or myself) could start building a WP theme from that static mockup.
Vue features I'd like to use:
.vue component files, with markup, scripts and styles within the same file
Component slots
I don't need routing, state store or anything fancy
Is this even possible?
I am currently working on a project where I'm using css modules for each component and for pages containing the components. Apart from this I have a main index.css which just has the layout css and nothing else . I'm using bootstrap and react bootstrap apart from this. When I run npm build I notice that the react bootstrap is loaded but the module.css that I coded isn't, so my page looks horrid without styles. Can you offer any pointers on how I should proceed? Note: it's working perfectly fine running a server on 3000 on npm start and it is only on production that this happens. I am not using any specific webpack.config.js
Symfony 5, Vue 2.6, Webpack 4
I have seen many guides explaining how to create a SPA, but right now I want to integrate Vue in just one view, as the app has many views and data, it would take couple of months before we can implement whole new framework in our app. Currently we are using webpack and we are having some problems with integration.So,
Would you use webpack encore instead of webpack and if so, why?
Our main goal is to optimize everything - what does webpack encore loads additionally that webpack doesn't have and does it contain bunch of useless stuff?
Importing modules in js files - js has no way of knowing the hash that the webpack generated, so importing must be done inside twig in the script block. You can only import modules at the top level, so putting script type=module solves that issue, but then browser cannot guess the MIME type of the .vue files, even when X-Content-Type-Options=nosniff - any workaround that?
Are there any other options to import asset from the webpack build including chunkhash?
I'm currently involved in a complex project which I will require help from this forum in order to complete! I am a novice; and have thus far only completed Michael Hartls Tutorial.
Currently I am attempting to import this template into my new application. I have successfully got Bootstrap working; as the generic text improves. This shows that it is working!
However, when I paste the content from the Index file it does not display correctly. I imagine this is due to incorrect placing of CSS and JS files in the ruby folder.
https://startbootstrap.com/template-overviews/creative/
Thanks!
I'm building a meteor app with meteor-angular2 package. But with .css it's quite unfunny so far.. As soon is try to import a css file in a component, meteor is "modules-loader" is telling that this is not a module i'm trying to import (true basically :D)
Now i'm fiddling around with a basic webpack+ng2 setup and i can get it easily running with direct imports of .css files in typescript - just because i can configure the webpack loaders correctly (you can even get css-modules in this way with ng2!)
So, in the docs of the latest meteor angular2 package release it is somwhere written that it is basically packing all the stuff with webpack.
What's the right way to modify this underlaying webpack config? Is it even possible? Do i have to fork the package repo to change it? At a first shot i didn't find the webpack stuff in there..