i have a Login module which contains login.html.
i want login to be the default module and login.html as the default opening page.
in main.ts file you will have something like this
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
replace this with
import { LoginModule } from './login.module';
platformBrowserDynamic().bootstrapModule(LoginModule);
Related
I would like to make a js module file that imports vue component and register there.
and then inherit this component and use it for the app's main component.
I've found similar cases but the thing is, I don't use vue cli.
custom.js
import customMain from '/custom/components/main/main.js';
window.Vue.defineComponent('custom-main', customMain);
and in the app.js
import Main from '/global/components/main/main.js';
var App = createApp({
...
components: {
'global-main': Main,
},
template: `<component :is='mainComponent'></component>`,
computed: {
mainComponent() {
if(this.settings.customComponent){
return 'custom-main';
}else{
return 'global-main';
}
}
is this doable? what should I do to make this work?
is there other alternative way to load components dynamically?
The best approach for this case is defining a plugin named registerComponents in the plugins folder : plugins/registerComponents.js
import customMain from '/custom/components/main/main.js';
export default {
install: (app, options) => {
app.component('custom-main', customMain);
}
}
in App.js use the plugin:
import registerComponents from './plugins/registerComponents'
var App = createApp({....})
App.use(registerComponents)
I'm trying import js-cookies in my main.js
Main.js
import * as Cookies from "js-cookie";
Vue.use(Cookies)
Using in component
this.$Cookies.set('name', data.user, { secure: true });
Error
TypeError: Cannot read property 'set' of undefined
what is the problem?
I have tried a thousand ways and it still does not work.
Vue.use(name) is used to install a vue plugin. The package will need an install method that receives a vue instance.
#1
You can use the cookies packages without a plugin importing the module in the component
<script>
import Cookies from 'js-cookie';
export default {
methods: {
addCookie() {
console.log('adding the cookie');
Cookies.set('chocolate', 'chookies');
console.log(Cookies.get());
}
}
}
</script>
#2 you can add a VUE plugin and set a Cookies prototype function to the Cookies module.
(Prototype vue functions will be available for components, it's standard to prefix them with $).
src/CookiesPlugin.js
import Cookies from 'js-cookie';
const CookiesPlugin = {
install(Vue, options) {
Vue.prototype.$Cookies = Cookies;
}
};
export default CookiesPlugin;
src/main.js
import CookiesPlugin from './CookiesPlugin';
Vue.use(CookiesPlugin);
In the component
this.$Cookies.set('chocolate', 'chookies');
console.log(this.$Cookies.get());
You are using a NOT Vue (Vanilla JS library) library and you are trying to use it as a Vue resource.
Try using this one instead
https://imgur.com/quHp4ym
This is my Folder structure.
I want to call Login Component from AppHeader Component. What will be the folder structure during calling.
My try:
Not working.
<script>
import Login from '../components/auth/Login.vue'
export default
{
}
</script>
You should accomplish it with
import Login from '../../auth/Login'
Use # prefix to point to root folder of project then you can go anywhere
import Login from '#/...';
So I have setup my Aurelia application in the following way and I want to import all my modules and dependencies in Main.js and still be able to inject dependencies in modules like Start.js. I also want to display a splash screen that waits until everything is loaded. Is any of this possible?
main.js
import 'bootstrap';
// TODO: Import all modules here
// import {inject} from "aurelia-framework";
// import {PortalData} from "./portalData";
object export function configure(aurelia){
aurelia.use
.standardConfiguration()
.developmentLogging();
// start aurelia and navigate to app.html / app.js
aurelia.start().then(a=> a.setRoot());
}
app.js
export class App {
// aurelia convention
configureRouter(config, router)
{
this.router = router;
config.map([
{
route:["", "home"],
moduleId:"./start",
title:"SevaLink",
nav:true
}
start.js
import {inject} from "aurelia-framework";
import {PortalData} from "./portalData";
#inject(PortalData)
export class Start {
constructor(portalData){
this.portalData = portalData;
}
activate(){
return this.portalData.getApplications()
.then(apps => this.applications = apps);
}
}
You can import all of your dependencies in any module in your application. I'm not sure what that would accomplish, though. This would just make your application slower to start, and wouldn't really provide any benefit. Aurelia uses lazy loading for modules. If you want to load all of the code for your application at startup, just bundle the application.
I have installed toastr in my Aurelia app. I am able to import and use it in different views, but I can't figure out how to set/modify its global options.
Ideas?
The most trivial place to do that is in you application constructor. You must also have your toaster script loaded at this point. Here's how your app.js could look like:
import {Router} from 'aurelia-router';
import toastr from 'toastr';
export class App {
static inject() { return [Router]; }
constructor(router) {
toastr.options.closeButton = true;
// ... setup your routing etc
}
}
I assume you already have your toaster script loaded at this point. You can also move toastr initialization to any other Aurelia constructor, or any other place, I don't see any technical restrictions.