In meteor 1.3 package scripts are added inside body. So I'm not able to get exported variables from packages in the head tag.
client/main.html
<head>
<title>simple</title>
<script>
console.log(ReactiveVar);
</script>
</head>
client/main.js
import { ReactiveVar } from 'meteor/reactive-var';
console.log(ReactiveVar);
import './main.html';
But I can log the same variable from js files. This is because meteor is loading scripts inside body instead of head. Is there a possible workaround in this situation.?
When I add import { ReactiveVar } from 'meteor/reactive-var'; to head script Browser Console shows the following error.
Here is a repo of a sample app https://github.com/aruntk/meteor-script-in-head.
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] })
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
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.
Using Symfony 4 and Webpack Encore, I can't get Select2 to work.
I'm using select2#4.0.3 and importing it this way in app.js:
import $ from 'jquery';
import 'bootstrap';
import 'select2';
I also tried to use
Encore.autoProvidejQuery()
in webpack.config.js, then taking care of commenting the
import $ from 'jquery';
line in app.js so that jquery is not imported twice.
I tried everything I could find in other answsers like:
import select2 form 'select2';
$(() => {
$('.select2-enable').select2();
});
or
select2($);
Almost all my attempts result in the same error:
TypeError: $(...).select2 is not a function
EDIT:
Working now. Everytime I made a change in app.js (and rebuilt) I used the firefox devtool console to check if it was working but I always got the
not a function
error even though the problem was solved and select2 was working.
Is this because I'm using Webpack that the browser console doesn't recognize the select2() function anymore?
First install it using yarn:
yarn add select2
Then use it with require instead of import:
require('select2')
at your app.js file.
It works the same using require or import.
Babel converts import and export declaration to CommonJS (require) which lets you load modules dynamically.
So, despite of them looking the same, try to always use require.
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