I'm using Quasar and the PWA starter kit, with VueJS.
I want to know how to declare once a set of components used throughout many pages in a Vue app.
I seem to need to have a huge import declaration in every page
I tried to import once in main.js but there is a conflicting
import Quasar from 'quasar'
so I can't add to that or change it to
import {
Quasar,
QCard,
.... etc
} from 'quasar'
as the {} seems to break the import.
Also can't import twice (duplicate import error).
What is the way to import components once for a whole app?
Or get at the Vue object so it can be used in another way to import inside a different component?
You can import specific components to register globally in the main.js file when you register the Quasar plugin.
For example, in you want to be able to use the <q-btn> and <q-icon> components anywhere in your application you could do this:
import Quasar, { QBtn, QIcon } from 'quasar'
Vue.use(Quasar, {
components: { QBtn, QIcon }
})
Here's the documentation.
Related
I have flutter application which uses different webview plugin for each platform(mobile, web, window).
Though I am able to import platform base on web and mobile, I am not able to import for windows.
I have tried adding else condition if it is not mobile or web, but it is taking mobile plugin.
This is how I import package for web and mobile (Working).
import 'package:eam_flutter/form/mobileui.dart'
if (dart.library.html) 'package:eam_flutter/form/webui.dart'
as multiPlatform;
This is how I import package for web, mobile and windows (Not Working, it is showing mobile webview exception since it doesn't support desktop).
import 'package:eam_flutter/form/windowui.dart'
if (dart.library.html) 'package:eam_flutter/form/webui.dart'
if (dart.library.io) 'package:eam_flutter/form/mobileui.dart'
as multiPlatform;
How can I specify conditional imports for windows?
For anyone else finding this, note that the accepted answer is not an answer to the question that was asked. The answer to the question that was asked is that you cannot. There is no way to use conditional imports to get different behavior between mobile and desktop; see this comment from the Dart team.
Since there is no conditional import support for window since it comes under dart io.
I have this workaround and found it working.
I end up creating file for each platform with different package import.
import 'package:flutter/foundation.dart' show kIsWeb;
import 'dart:io' as io;
if(kIsWeb){
{
return WebPage(); //your web page with web package import in it
}
else if (!kIsWeb && io.Platform.isWindows) {
return WindowsPage(); //your window page with window package import in it
}
else if(!kIsWeb && io.Platform.isAndroid) {
return AndroidPage(); //your android page with android package import in it
}
//you can add others condition...
Maybe we no longer need conditional import.
Look at the code below:
import 'package:package1/package1.dart';
import 'package:package2/package2.dart';
const keepFunc1 = bool.fromEnvironment('KEEP_FUNC1');
dynamic result2;
void main() {
if (keepFunc1) {
result2 = Calculator1()..addOne(1);
} else {
result2 = Calculator2()..addOne(1);
}
runApp(const MyApp());
}
If KEEP_FUNC1 environment variable is not specified to true. The package1 and the class Caculator1 won't be packaged into apk or ipa.
For more details, see the answer I wrote here.
So we can import all packages and use a const environment value to decide what packages to import. The tree-shaking mechanism is smart enough to remove unused parts.
Check this example
you need to create 2 files one for web & another for os and use condition on import
I see that Flutter has conditional import statements, but after looking at some examples I’m still confused.
If I want to have main.dart import package “package:xyz/xyz.dart” only when the user is on web, how can I achieve that in the simplest way? Thanks for any tips.
We could import a package only for the web users by the use of a conditional import:
import 'package:xyz/mobile.dart'
if (dart.library.html) 'package:xyz/web.dart';
The code above imports package:xyz/web.dart only if dart.library.html is available, which happens to be the case for the web platform.
As per this link, I'm able to install the podfile just fine: https://developers.google.com/ml-kit/vision/object-detection/ios#objc
https://i.stack.imgur.com/AqkFZ.png
But what's the actual import statement at the top of my code? I can't find that anywhere. For example I'm trying to find something like the following code example but can't anywhere.
import GoogleMLKit
import GoogleMLKitObjectDetection
I must be missing something very simple.
In the example projects on Github the implmentation is
import MLKit
Here are differents example projects about its use. The link is in the documentation you shared.
https://github.com/googlesamples/mlkit/tree/master/ios/quickstarts/vision
Im using the login example from the Meteor React Tutorial
meteor add accounts-ui accounts-password
Its all ok but Im trying to find the file and change it but I dont know where is it.
This is my code:
import { Blaze } from 'meteor/blaze';
export default class AccountsUIWrapper extends Component {
componentDidMount(){
this.view = Blaze.render(Template.loginButtons,
ReactDOM.findDOMNode(this.refs.container));
}
componentWillUnmount(){
Blaze.remove(this.view);
}
render(){
return <span ref="container"/>
}
}
And i have installed meteor add useraccounts:materialize
How can I put the template on this?
You need to put your component inside /imports/ui/ directory and name the file as AccountsUIWrapper.jsx
So it will be saved as /imports/ui/AccountsUIWrapper.jsx.
Then you can import your wrapped component inside /imports/ui/App.jsx file with:
import AccountsUIWrapper from './AccountsUIWrapper.jsx';
And then use it in your React render function in the same file as:
<AccountsUIWrapper />
The tutorial lays it out pretty clearly, including all the filenames and locations. You should be able to access their GitHub repository for the same.
If you want, for reference, you can also take a look at my code at this particular step back when when I did this tutorial myself.
Update: For useraccounts:materialize
The useraccounts:materialize package that you have mentioned depends on useraccounts:core package as its base. So you cannot apply useraccounts:materialize to default meteor accounts package directly.
Follow the instructions on useraccounts:core to set it up. You may need to remove accounts-ui as well, as it would likely clash with the above packages.
Then, go through the documentation for useraccounts that shows how to render their accounts template in Blaze.
After that, using the same way as shown in the tutorial, you should be able to create a new React wrapper for useraccounts:materialize Blaze template.
Here are links to boilerplate useraccounts:materialize code for Iron Router and Flow Router. From these you can take reference for the Blaze template code, which you can then wrap in React:
Boilerplate with iron:router
Boilerplate with FlowRouter
I'm writing an addon that defines a StickyHeaderListComponent under addon, and import it according to the Components section of the addons section of the guides.
I'd like to write some tests + use the dummy app, but the dummy app doesn't have access to {{sticky-header-list}}. How can I import it?
The app folder is merged into the application which consumes the addon during the build.
So, The file sticky-header-list.js should be under app/components.
Best practice is to write a mixin which will include the entire code of the component under addon/mixins
// addon/mixins/sticky-header-list.js
export default Ember.Mixin.create({
//Put all the component code here
});
And the actual component will be
// app/components/sticky-header-list.js
import StickyHeaderListMixin from '<your-addon-name>/mixins/sticky-header-list';
export default Ember.Component.extend(StickyHeaderListMixin);
In that way, a developer that will install your addon can choose to use the mixin, since the component code is not available at dev time.
The mixin will be importable under the path <your-addon-name>/mixins/sticky-header-list.js.
You can see an example in my ember-cli-lightbox addon.