Using Webpack, I have this code:
import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'
createApp(App).mount('#search-app')
On my website, I have a page for the search app that contains the <div id="search-app" /> to mount the root of the application to.
What I would like to know is, whether it's possible to somehow insert (preferably) some of the data from the page that includes the javascript file? There are a few things items I would like to include from the database, such as settings and search categories, and I'd like to avoid making an AJAX request for them if it can be helped.
Can it be helped or is there some way I can include this data inline at load time?
With Webpack, I don't quite understand how I can get access to App from the page that loads the javascript file, so that I can modify data before somehow passing it in to createApp(), or if it's even possible. Can I use import statements on a page that's loaded by the browser, or is this stictly a Webpack only (or similar) feature?
Many thanks in advance.
You can use createApp's second parameter to pass props.
import { createApp } from 'vue'
import Vue from 'vue'
import App from './components/ItemSearch/ItemSearch.vue'
createApp(App, {myProp: "value"}).mount('#search-app')
docs
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 currently working in a new version of a Dashboard application in React with an API in the back. The old one is a site that was made with ASP.NET WebForms technology.
We are not going to migrate all the sections at once, so we are working on phases. We need to achieve navigation between both systems without problems.
Our main issue was cross-site authentication but we were able to solve it pretty fast. Then we started working on navigation, going from the new system to the old one works fine but the problem is when you are at old system and you want to go a new section of the React App. It always redirects you to the last page you visited instead of redirecting to the one you are pointing. I think its something related to the history of React, based on what I was reading.
I'm pretty much new with React so I don't know where to start. We are currently using "connected-react-router" for Routing and here there is code from the App.js file (I dont know if it is useful but I have characters limitation while adding content to the body):
import React from "react";
import { ConnectedRouter } from "connected-react-router";
import numeral from "numeral";
import "core-js/stable";
import "regenerator-runtime/runtime";
import routes from "./routes";
import Layout from "./components/layout";
import Notifications from "./components/globalNotifications";
import es_locale from "../configs/es_locale";
numeral.register("locale", "es", es_locale);
numeral.locale("es");
const App = ({ history }) => {
return (
<ConnectedRouter history={history}>
<Layout>
<Notifications></Notifications>
{routes}
</Layout>
</ConnectedRouter>
);
};
export default App;
Let me know if you need more code to guide me.
Thank you.
I have an app created using react-create-app tool and I use a style.less file in src/assets/less that is compiled automatically.
In my style.less I import the style I have in the various react components in my app. I like the idea to have every component with his own style.less in there.
The first problem is the reference I have to add or update in the src/assets/less/style.less, every time I add a component or I rename it or I move it. Is there any way I can get all the import automatically?
If your webpack.config.js is configured correctly, you should be able to import each components styles like:
import './style.less';