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] })
Related
I am trying to essentially embed a Vue component into another one from a remote source (npm), without using a Vue Plugin. The components are mounting as expected, however, because the embedded component uses Vuetify, it's style is polluting the style of the "parent" application Here's some images that hopefully illustrate what i mean:
Note the primary colors of the root application before mounting the embedded component
Upon mounting of the Login (embedded) component:
I tried the strategy mentioned here, using less in the embedded component to import the vuetify css at a block level, but it doesn't seem to be working for me.
I realize that, in the end, I could ultimately solve this by ensuring the embedded theme matches the root applications theme, but I'd rather not have to rely on that. If my component is being built with webpack, why am I unable to apply Vuetify's css to just that component? Any suggestions?
happy to include code if necessary
To use with vue.js install postcss-parent-selector
npm i postcss-parent-selector -D
then create a postcss.config.js file in root and add following code
module.exports = {
plugins: [
require("postcss-parent-selector")({
selector: ".mywrapperclass",
}),
],
};
Then in public/index.html add a wrapper element around the app:
<div class="mywrapperclass">
<div id="app"></div>
</div>
Some links:
https://vue-loader-v14.vuejs.org/en/features/postcss.html
https://www.npmjs.com/package/postcss-parent-selector
https://github.com/postcss/postcss
I am currently having the same issue with my application. The possible solutions I've came up with are:
-Embedding the child Vue application via iframe and using a library like vuex-iframe-sync to pass props between Vuetify root app and the child app.
-Disabling Vuetify theme alltogether and perhaps customize components on my own:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
const vuetify = new Vuetify({
theme: { disable: true },
})
-Another option was using webpack config to run a PostCSS plugin and possibly add prefixes to Vuetify's global styles while bundling the app, but I couldn't figure out how.
Please let me know if you make any progress on this topic!
I am using Meteor with React and Semantic-ui-react. I needed a toast function so I wanted to change to Fomantic UI. Everything related is loaded by NPM.
I removed semantic-ui-css and added fomantic-ui-css.
I removed the
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" /> from the head.
I changed all import 'semantic-ui-css/semantic.min.css'; to import 'fomantic-ui-css/semantic.css';
When I try to execute a
$('body')
.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'bottom'
})
;
I get TypeError: $(...).toast is not a function
I can't find anything on it over various searches through SO and repository issues.
Thanks for any help you can give!!
Phil
You basically need to import the semantic.js file, which will add the functionality to your jquery instances:
import 'fomantic-ui-css/semantic.js'
import 'fomantic-ui-css/semantic.css'
However, there is no need to import the .min.* minified files, because Meteor will use a js and css minifier when you build your app for production / deployment later.
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 multi-page application using ReactJS and I want different styles for different pages, especially the logo position.
This is my App.js file
import React from 'react';
import Login from './user/Login';
import Auth from './user/Auth';
import Home from './user/Home';
import ResetPassword from './user/ResetPassword';
import './App.css';
const App=()=>{
//ROUTING
}
export default App;
The last imported file always overwrites the styling properties of the entire app. I need to change the position of the logo in each page accordingly and also other things. How do I add different css properties for each page?
You can use or module css (for this you have to do changes in webpack).
https://programmingwithmosh.com/react/css-modules-react/
Also you can use package styled components https://www.styled-components.com/
In this case, you have unique styles for all components.
Create a folder structure as below. And import their own css files. If you are using sass use unique class names. For the 3rd party components, you may need using "!important" in the css files.
common/
Avatar.js
Avatar.css
feed/
index.js
Feed.js
Feed.css
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
and you can read this : https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
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