I have developed a Vue 2.6 SPA using Vuetify and Material Design Icons that is included as described here, but some elements of the SPA (partially derived by a public template) use also "Material Design Iconic Font". I would like to host locally the "zmdi" icons, instead of using CDN, and following the instructions reported here I installed this additional icon pack using:
npm install material-design-iconic-font
I don't know how to correctly include "zmdi" icons into the VUE app.
Could anyone suggest the easiest way to host Material Design Iconic Font within the VUE SPA?
I finally solved using
import "material-design-iconic-font/dist/css/material-design-iconic-font.css";
into "main.js".
I have to include something else into "vue.config.js" to instruct webpack to correctly handle this css file?
Related
I have a legacy web application which I have introduced Vue into in a few places, via CDN. I have upgraded it from Vue 2 to Vue 3. There is a component used there which breaks with Vue 3, but there is a Vue 3 version of it. However, the author states this: "The component is packaged mainly for use with bundlers, if you require a browser build - post an issue." I do require a browser build. Is there some easy way I can do this for myself? I wasn't planning to use a bundler for this application, so I'm hoping I can use the existing modules to create a .js file I can use from the browser?
I have a website based on Vue framework and webpack.
I came across this css framework developed by Google (Material Components Web) where you can directly get started using a cdn or an npm package. It worked extremely well for a simple html/javascript based website. But, I am having issues setting it up for the Vue project.
There are other wrappers available for Vue framework like Veutify and Vue Material. But, it comes with lot of additional stuff like the grid layout which I don't want the developers to follow as we are already using a flex layout. I only want the component library.
So, is there a way use the Material Components Web with the Vue framework?
I didn't get the Material Components Web working with the Vue framework. But I did found another light-weight material design framework i.e. Material Design Lite.
Note: It is not specific to any framework. It lets you add Material Design look to your website developed in any framework
You can easily get started with a wide variety of options like cdn, bower, npm or even by downloading the files.
Material Components Web has modular architecture. Each component or API is distributed as a separate package. It means that you can use them separately, although there are some dependencies.
Also there is "root" package - material-components-web, which just references all other packages.
By default, when you add a package, it will not be included in your app. You'll need to import component's SCSS and optionally JavaScript. Basically like you would use any other component.
Reference this Vue app template as an example. As you can see here, it references only subset of MDC's components/APIs.
I have a Gatsby project that uses Theme UI and Netlify CMS.
How can I style the Netlify CMS preview pane with my Theme UI styles?
Netlify CMS doesn't support CSS-in-JS libraries:
https://github.com/netlify/netlify-cms/issues/793
Unlike Styled Components, it doesn't seem possible to convince Emotion to inject its styles into the Netlify iframe, either. There does appear to be some support for injecting raw CSS into the preview iframe:
https://github.com/netlify/netlify-cms/pull/1162
But so far I can't seem to figure out how to make any of this work together on my own.
The new Vue.js 3.0 plugin architecture is nice, but it seems to to be missing a router plugin. If I choose not to install routing when I first create the project (vue create my-project), I'd expect that I could change my mind later and add routing with something like vue add #vue/router, but that plugin doesn't appear to exist. Is there a way to add routing from the CLI after the fact?
After some experimenting with vue-cli3, i found that you can use vue add to setup components you missed.
Use vue add router That set up the routing and created some sample components Home and About.
This also work for other modules like adding vuetify with vue add vuetify. You can read more about vue add from the plugins and presets guide
Have a look at the issue page here: https://github.com/vuejs/vue-cli/issues/1202, the conclusion is you can't use cli to add router if you didn't choose router initially.
With three reasons:
Late-adding router when you've already modified the entry file is extremely fragile.
If you haven't modified the file much, you can just re-generate the project instead.
If we only add the dependency and skip the file-modifying part, then it's easier to just npm install vue-router or yarn add vue-router.
Could you please explain what is the main difference between different Vue installation methods for building a one-page website (page routing) with Vue and an Electron app using Vue:
importing Vue.js library via <script>
installing it via Vue-CLI
This installation guide doesn't really help understand the difference.
Is my site / app going to work slower if I just import Vue via <script>?
The <script> include is for including the Vue library in your webpage just like you would any other JavaScript library. Vue will be available on the window object for you to access globally. All external JavaScript must be included like this one way or another, even if you use vue-cli.
vue-cli is just a tool which generates Vue projects from templates. The setup really depends on the template that you use; I imagine most people would probably use the webpack template for medium to large sized Vue projects. This will initialize a node project directory containing all files necessary to develop, debug, test and build a Vue project. Webpack takes care of bundling all modules into a single JavaScript bundle which is included into the webpage via <script>. You can also benefit from vue-loader which allows you to write Vue components in *.vue files.
Is my site / app going to work slower if I just import Vue via <script>?
I mean, not really, no (your development speed might be hindered though since you won't benefit from all the bells and whistles that vue-cli sets you up with). Your question applies more to the development approach that you will follow for developing a Vue web application.