I'm using vue-cli-3.4.1. After creating project, i'have added vuetify to my project using command vue add vuetify.
There is another vue web-component, which i'm trying to use in my application.
I have added scripts to index.html file, like this
<script src="https://unpkg.com/vue"></script>
<script src="path/my-component.min.js"></script>
But, after running command npm run serve, getting this error in console and showing blank page.
[Vuetify] Multiple instances of Vue detected
Your index.html file should only have one vue instance.
The vue-cli structures your application using a module system.
If you don't have one already create a components directory and place your my-component.vue there.
Then you’ll need to import my-component.vue, before you locally register it in the component you want to use it in.
Assuming the below component is named App.vue
<template>
<MyComponent />
</template>
<script>
import MyComponent from './components/my-component'
export default {
components: {
MyComponent
},
// ...
}
</script>
Now MyComponent can be used inside App.vue's template.
https://v2.vuejs.org/v2/guide/components-registration.html
Hope this helps.
Related
I'm trying to add push notifications to my svelte site using Firebase/Google Cloud Messaging (FCM), and a service worker JS file needs to exist at the absolute path: https://example.com/firebase-messaging-sw.js . However, Vitejs is bundling this with the other svelte/js code in my project. I can manually place the file there, but then it won't be transpiled. Aka these imports here won't work in the file:
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";
So how do I tell Vite not to bundle this file and have it output at the root dir?
Alternatively, I saw there might be a way to pass a service worker differently, if that removes the need for the js file please let me know roughly how it's done.
Thank you.
I have created a vueJS website and I have used the history mode for routing in order to get rid of the # in the URL which shows in the default has mode routing. However when I deploy my project to the server after
npm run build
it runs fine but when I reload any page or type the url in the browser manual i get a 404 error instead.
I have used the history mode for routing. I am using firebase for the backend. I read the documentation on how to fix this however I did not quite understand it.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode : 'history',
routes : [
{
path : '/',
name : 'dashboard',
component : 'Dahsboard',
}
]
})
I don't have enough reputation to answer in the comment section under your question, so i provide an answer here.
You can find the code that tells the web server to serve the index.html file for every routing request here. Just create a .htaccess file and upload it to your server.
In your example above you also need to import your Dahsboard-Component if you are using single file components.
I'm starting to develop an web app in Angular using the Angular Material library for the interface. But I'm getting an error when trying to import a prebuilt theme. In order to import it, I added <link rel="stylesheet" href="../node_modules/#angular/material/prebuilt-themes/indigo-pink.css"> to my index.html file but when i run ng serve I cannot get the file.
If you are using angular-cli follow their steps for including Angular-Material.
Ensure you have the below imports in src/styles.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
#import '~https://fonts.googleapis.com/icon?family=Material+Icons';
It's slightly different to what angular-material suggest on their own Getting Started site but it worked for me.
Check that your path is correct. I had the same problem and I fixed the path:
Mine is
<link rel="stylesheet" href="lib/#angular/material/core/theming/prebuilt/indigo-pink.css">
If you don't find any solution just add angular material again. It won't affect your code but add the CSS. Don't forget to re-start the angular server.
ng add #angular/material
I have a header and footer react component saved to the NPM repository that i would like to include on various applications. I can include a React component by requiring it from my "parent" application. This will get the React object required to load the component if i have a js document with
var HeaderComponent = require('../../node_modules/header-component/dist');
ReactDOM.render(<HeaderComponent />, document.getElementById('header-hook'));
But also within that dist directory, I there's a styles folder with all the required styles for the header. What is the way to package a node module so that it includes accessible styles?
With npm being the recommended packaging system as of Meteor 1.3, I now have both server-side and client-side packages in my node_modules directory. Meteor attempts to bundle all of these into one huge modules.js file.
The only way to get meteor to completely ignore files appears to be to change the file or directory name (1, 2).
But I don't want to completely ignore the files - Some modules I need only on the server side, some only on the client side.
Is there a way to get Meteor to only include certain node modules in the client side bundle, perhaps through creative naming or hacking .babelrc?
Everything needs to go into the bundle, which you place on the server. When you go to your web site, the server makes your HTML, CSS and JS available and is loaded into the browser. Only the node modules needed by your browser get loaded.
There is no need to do this :)
Hide them in server folder and import them indirectly.
To exclude certain npm node_modules from being bundled into the massive modules.js file and prevent useless megabytes of script being sent to the client: conditionally require a file that itself imports modules from within a server folder.
Like so:
/* /my-import-file.js */
import { Meteor } from 'meteor/meteor';
if (Meteor.isServer) {
module.exports = require('./server/server-only-file');
}
And the file that actually imports your large, useless-on-the-client npm modules:
/* /server/server-only-file.js */
// Import some modules that will NOT be sent to the client
import mailgun from 'mailgun.js';
import cheerio from 'cheerio';
import juice from 'juice';
export { juice, cheerio, mailgun };
Your other code can then do like so:
import { Meteor } from 'meteor/meteor';
import myImport from '/my-import-file'
if(Meteor.isServer){
myImport.doServerOnlyStuff();
}