I'm using vue-docgen-cli to document my components. These are Vue3 using composition API and script setup under Vite.
Few of my components use some other component like this (filename: MyComponent.vue):
<script setup lang="ts">
import SearchField from "#/components/SearchField.vue";
import SearchFieldTags from "#/components/SearchFieldTags.vue";
import Pager from "#/widgets/Pager.vue";
import FragmentWithContext from "#/components/FragmentWithContext.vue";
. . .
How is it possible to add in the MyComponent documentation that it is using these four components?
In the function set in template.component of docgen.config.js there are isSubComponent and hasSubComponents arguments, but how to set them?
Thanks for enlighten me!
mario
Related
I am migrating to Vue3 from Vue2 and am trying to wrap my head around how to extend an existing vue component that has template, script and style sections in it. I have read about composables but I haven't seen an example that uses a combination of template/script/style sections. The only examples I see use a js/ts file which only contain the script section and then is usually inserted via useXYZ call.
Is this possible in Vue3? Do I have to use mixins or some plugin to make this happen?
// Foo.vue
<template>Some long template with lots of elements</template>
<script lang="ts">
import Vue from 'vue'
// Tons of functions and variables in here
export default Vue.extend({ [component "Foo" definition] })
</script>
<style>
<!--Tons of CSS here -->
</style>
and the extended component:
import Foo from './Foo'
export default Foo.extend({ [extended component definition] })
I am working on porting an existing React App to ReScript React, however I am running into a few issues. Namely I can't for the life of me figure out how to import CSS in ReScript, for example, In React to import Bootstrap all I would have to do is:
import 'bootstrap/dist/css/bootstrap.min.css';
However there is no corresponding way to do this in ReScript (to my knowledge), I tried doing:
#module("bootstrap/dist/css/bootstrap.min.css")
But it doesn't work. How can I import CSS files in ReScript React?
Use a %%raw expression to import CSS files within your ReScript / React component code:
// in a CommonJS setup
%%raw("require('./styles/main.css')")
// or with ES6
%%raw("import './styles/main.css'")
Reference - https://rescript-lang.org/docs/react/latest/styling
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
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 playing around with https://reactjs.net/ , and want to setup an application inside my existing ASP.NET MVC application.
I have made a couple of simple React applications using the "default installation template" inside Visual Studio, but not based on ReactJS.net and where the content is only a subpage.
However, if I take the tutorial template used as examples:
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
There are no importing React like: import * as React from 'react'; , which I am used to.
So my question is: why not? And when are you supposed to import React?
Because import React from 'react'; is required when you are trying to import npm packages. Reactjs.Net doesn't use npm dependency and you're required to put the CDNs in your view using <script src="">. Basically, you're importing React automatically when you use the CDNs