Is there a way to globally import (import statement in only one file and imported only once) JavaScript modules so that the imported module is available throughout the entire Vue / Quasar application?
I was trying to achieve this using Quasar's boot files. But when I have to access the global property it is a whole lot of 3 more lines to make the global property available in the current component. (specially via the composition api).
Is there an easier / clean way to do this?
import { getCurrentInstance } from 'vue'
const MyComponent = {
setup() {
const internalInstance = getCurrentInstance()
// access to globalProperties
internalInstance.appContext.config.globalProperties
}
}
Related
I have an issue with Next.js. When I'm trying to import a node module,
the module uses the window object and Next.js is throwing an error: window is not defined.
The module is imported like this:
import * as widgets from 'survey-widgets';
widgets.autocomplete(Survey);
I guess Next.js dynamic imports will not work in my case. Is there any way of doing it?
Try deferring all the code that uses window or any other api that is restricted to the browser, in useEffect, because the code in useEffect only runs in the browser.
If you can't do that, then make an intermediary module which you will use to import survey-widgets and re-export what you need. So in the end, you import that intermediary module dynamically.
import * as widgets from 'survey-widgets
export default widgets
For anyone looking for the solution for this, I solved it with NextJs Dynamic imports with no SSR.
What I did instead is importing my top level component using dynamic import like this:
const MyComponent= dynamic(
() => import('../components/hello3'),
{ ssr: false }
)
So the hello3 component will no longer be used in server side rendering and instead it will render on client side.
Then just use it like this:
<MyComponent/>
Is it possible to import React components from inside the page's directory ?
I can successfully import from outside /pages/[...]/.
/components/[...]/ works just fine for instance. And that is cool for re-usable components.
But if I want to split a single page's components into separate files as follows :
/components
- SomeReusableComponent.tsx
/pages/[...]/
- index.tsx
- SomePageComponent.tsx
And import it into my main component :
// /pages/[...]/index.tsx
import SomeReusableComp from '../components/SomeReusableComponent'
import SomePageComp from './SomePageComponent'
export default function MyPage(){
// page code
}
My build fails : Build optimization failed: found pages without a React Component as default export in
pages/
Is there a trick to do that ? Some setting or else to tell nextjs that this file is a dependency and not a page ?
No, unfortunately that is not possible. All files within the pages directory for a Next.js project must be entry points (that subsequently get turned into routes) and cannot be imported from any other files in your project. Next "collects" all of these files in pages and processes them in a special way, so there is no way to avoid that currently.
Typically for reusable parts that I want to use in multiple pages, I create a component that accepts children as a prop.
For example:
components/layout.js
export default function Layout({children}) {
return (
<div className="some-styling-for-pages">
{children}
</div>
)
}
pages/index.js
import Layout from '../components/layout'
export default function IndexPage() {
return <Layout>my page content</Layout>
}
According to the documentation found here
To import a css file I can do the following in 'pages/_app.js':
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Easy enough.
From my understanding this over rides the App component with the global css.
The documentation says:
Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:
However when I first initialize an app with Next Js I get a root page of pages/index.js
This contains my start up page. There is no app.js file or App component anywhere here.
I'm confused as to how the App component is integrated into the regular index.js file.
My question is:
Is the pages/_app.js automatically some how wrapped around pages/index.js?
Or do I have to import the myApp component into the pages/index.js file?
My question is: Is the pages/_app.js automatically some how wrapped around pages/index.js? Or do I have to import the myApp component into the pages/index.js file?
Yes, next.js automatically wraps your application with the component defined in _app.js. If you don't have that file, next.js uses its default.
You need to follow a specific pattern when defining your App component in _app.js. You can check here to see how you should set a custom App component: https://nextjs.org/docs/advanced-features/custom-app
I am creating a component library where I do not want to have global CSS. Therefore, every component is scoped.
When running the production build via
vue-cli-service build --target lib --name sc components/index.js, everything is compiled into sc.css and dist/css/1.392e001d.css.
If possible, I want to keep the css and/or scss combined with the vue file or js.
The reason I want to do this is to enable users of the library to import a singular component from the library. The users could then use the component anywhere without having to import/include a css file.
If this is not possible, is there a way to accomplish the desired functionality?
From the Vue CLI docs for css.extract:
When building as a library, you can also set this to false to avoid your users having to import the CSS themselves.
// vue.config.js
module.exports = {
css: {
extract: false
}
}
I divided my Angular 6 Project in many modules. Those modules reference a ui module containing all the style sheets (SASS) as values e.g.
$primary-text-color: #dde7ff !default;
The reason for this is reusability of the modules. After building one of those modules the stylesheets are already part of the *.js files. Everything is CSS and and the scss values doesn't exist anymore.
However, this approach doesn't allow the consumer to theme or change the values e.g. colors or fonts of the components inside the module afterwards.
My objective is to allow the consumer to:
create a new angular-cli project
define own global style variables like $primary-text-color: #dddddd !default; and therefore overwrite the mentioned variables
referencing existing modules
build the application.
The expected result would be an application with the look/theme of the consumers new style. With this approach the consumer wouldn't be forced to style each component manually.
To achieve this would it be possible to:
create angular-cli libraries without compiling the ts files and rendering the stylesheets? This would be just a bundle of the original files, but in a library. In this case the reference to the variables still exist and could be overwritten.
Style the components in the module with global stylesheets afterwards?
You can't really bundle your code without building it.
But, maybe there is a workaround for what you trying to achieve.
you can create an InjectionToken with the theming option.
Let say:
export interface Theming{
color: string;
}
const THEMING_CONFIG : InjectionToken<Theming> = new InjectionToken<Theming>('Theming Config');
Now, in your lib Module:
#NgModule()
....
export class UIModule{
static init(config: Theming): ModuleWithProviders {
return {
ngModule: UIModule,
providers: [{provide: THEMING_CONFIG, useValue: config}]
}
}
}
Now in each and every component in your lib you can inject the InjectionToken and use it in to style the elements (ngStyle?)
The usage of the lib for the end-user will be:
#NgModule
...
export class AppModule {
imports: [..., UIModule.init(USER_COLOR_HERE)]
}