For two days I'm trying to start using Vue 2 in my Meteor project. First I looked up some packages, and found https://github.com/meteor-vue/vue-meteor, but other than a list of packages it lacks anything usable itself, so here is that. A separate search on Atmosphere yielded in something I could actually use, namely https://atmospherejs.com/akryum/vue, but despite following every instruction I could find for this package, I don't think it works correctly for me, for example, I don't get the console messages regarding component hot reload, only the usual standard Meteor startup messages+messages when a file changes. It doesn't make use of the client/main.html file, unless I import it explicitly in client/main.js, but then I get a runtime error about missing module ./main.html, even tho I can clearly see then the template rendered, but w/o Vue magic in it. In the provided example project (without Blaze) I don't see the HTML being imported explicitly anywhere, so something is definitely off here. There are no other hints and clues in any produced output. So I'm stuck in limbo.
P. S. I also just realized it doesn't even do anything with the .vue components, as 1) I forgot to change an import from .js to .vue, and the app didn't crash at any time, and then, the imported .vue file was actually syntactically incorrect, until I fixed it just now.
For a starter boilerplate of Meteor + Vue, the perfect bundling + packages selection is Akryum's https://github.com/meteor-vue/vue-meteor-demo
I used it, and deployed to galaxy without problems. Excellent start.
This boilerplate contains:
Meteor 1.4 - 1.7+ + tracker + Vuejs 2 + vue-router + vuex (store) + graphql set up.
Cheers
I am starting to document my experience while trying to integrate the 2 technologies. If you want to see more: https://forums.meteor.com/t/meteor-vue-in-2018/44246
I have a bit different folder structure, but hopefully it is still relevant.
I have written an article that describes in detail the steps to install Vue and Vue Router in a Meteor application. I don't like putting links on Stackoverflow, but it's too much detail included in a answer here.
https://medium.com/#simonjcarr/adding-vue-and-vue-router-to-meteor-7c411131494f
I am using the following setup.
Packages
.meteor/packages
meteor-base#1.3.0 # Packages every Meteor app needs to have mobile-
experience#1.0.5 # Packages for a great mobile UX
mongo#1.4.2 # The database Meteor supports right now
tracker#1.1.3 # Meteor's client-side reactive programming library
standard-minifier-js#2.3.1 # JS minifier run for production mode
es5-shim#4.7.0 # ECMAScript 5 compatibility for older browsers
ecmascript#0.10.6 # Enable ECMAScript2015+ syntax in app code
shell-server#0.3.1 # Server-side component of the `meteor shell` command
static-html akryum:vue-component
akryum:vue-blaze-template
session#1.1.7
check
dynamic-import#0.3.0
fourseven:scss
seba:minifiers-autoprefixer
package.json
{
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.44",
"meteor-node-stubs": "~0.2.0",
"#deveodk/vue-toastr": "^1.0.4",
"babel-runtime": "^6.23.0",
"bcrypt": "^1.0.2",
"vue": "^2.2.6",
"vue-router": "^2.5.1",
"vuex": "^2.3.1"
},
"devDependencies": {}
}
Client directory
client/main.html
<body class="pace-done md-skin">
<div id="app"></div>
</body>
client/main.scss
// Libs
import {Meteor} from 'meteor/meteor'
import Vue from 'vue'
import { router } from '/imports/client/plugins/router';
import store from '/imports/vuex/store'
import AppLayout from '/imports/client/ui/AppLayout.vue'
// import '/imports/client/plugins/plugin_name'
// App start
Meteor.startup(() => {
new Vue({
store,
router,
el: '#app',
render: h => h(AppLayout)
})
});
Rest is standard vue. I can add alse AppLayout.vue to demonstrate what I mean
/imports/client/ui/AppLayout.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'AppLayout'
}
</script>
Related
I have a nrwl Angular-Jest application setup via npx create-nx-workspace.
While working on this project, I had upgraded from:
"firebase": "9.1.3",
"firebase-admin": "9.12.0",
"firebase-functions": "3.15.7",
to
"firebase": "9.16.0",
"firebase-admin": "11.5.0",
"firebase-functions": "4.2.0",
to get the extension emulator working locally. Although it works, I now have issues running jest. It says that firebase now has es6 imports and wont work. Error Message Below:
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/Users/[justOnlyMe]/Desktop/[nrwlProject]/node_modules/firebase-admin/lib/esm/auth/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import mod from "../../auth/index.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (../../../node_modules/firebase-functions/lib/common/providers/identity.js:25:14)
I've also tried using transformIgnorePatterns to get a transformation just for firebase node_modules but now jest continues to run and seems unresponsive. (I believe this may be an issue with ts-jest in jest).
transform: {
'^.+\\.[tj]s$': 'ts-jest',
},
transformIgnorePatterns: [
'../../../node_modules/(?!#firebase.*/)',
'../../../node_modules/(?!firebase/)',
'../../../node_modules/(?!firebase-admin/)',
'../../../node_modules/(?!firebase-functions/)',
],
Question: Does anyone know how to get es6 node_modules to work with jest in a nrwl nest.js typescript project?
My jest config:
module.exports = {
displayName: '[projectName]',
preset: '../../../jest.preset.js',
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.spec.json',
},
},
transform: {
'^.+\\.[tj]s$': 'ts-jest',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
moduleFileExtensions: ['ts', 'js', 'html'],
coverageDirectory: '../../../coverage/apps/back/[projectName]',
testEnvironment: 'node',
}
In your jest config add in the transform object the babel-jest config:
"transform": {
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "ts-jest"
}
I am already successfully using Vue.js v3 by creating a project with Vue CLI or with Vite.
Now I need to have just single .vue files that I can run and build individually.
I read this is possible just by using "vue serve myfile.vue" and "vue build myfile.vue", but unfortunately I am having some trouble.
I have the last vue-cli version installed. Sure enough if I launch in the command line "vue --version" I get "#vue/cli 4.5.14".
Then, in a directory I created a very simple .vue file with the following code:
<template>
<h1>The count is 1</h1>
</template>
If I run "vue serve myfile.vue", everything works fine, then I am happy to continue and make some more interesting things.
Now I add a script setup section to the file:
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
<h1>The count is {{ count }}</h1>
</template>
Now if I relaunch "vue serve myfile.vue", I get the following error:
4:7 error 'count' is assigned a value but never used no-unused-vars
Ok, I am a newbie about ESLint, so I started to search for something on the internet and I found that I must use a rule that can solve this problem, and the rule is "vue/script-setup-uses-vars".
Then I added a new file .eslintrc.json in the root path:
{
"plugins": [
"vue"
],
"rules": {
"vue/no-unused-vars": "warn",
"vue/script-setup-uses-vars": "warn"
}
}
I try again but I get this warning: " 1:1 warning Definition for rule 'vue/script-setup-uses-vars' was not found vue/script-setup-uses-vars".
Then I guess it is not working...
Nonetheless, if I run again "vue serve myfile.vue", the local server gets created but at the same time I get a different warning:
warning in ./myfile.vue?vue&type=script&setup=true&lang=js&
"export 'ref' was not found in 'vue'
And here I start to not understand.
Is my .eslintrc.json file wrong? Why "ref" is not found from "vue"?
I searched a lot on the internet but I can't find anything helpful.
Can someone explain to me why this doesn't work?
Thanks!
I am new to MeteorJS, and I am using Linux. As a basic newbie, I decided to stick to the tutorials on their official website. I went to follow the to-do list tutorial and selected the blaze option. At around step 6 or 7 the tutorial mentioned that you should start to see your application come together in your localhost:3000 when running it. After starting meteor and waiting for it to build the application I opened up localhost:3000. it looked like this:
AppImage. I thought there was an issue with my meteor installation so I ran
meteor npm install
to check if my installation was up to date and the output was:
up to date in 12.362s
I couldn't figure out what was wrong since the terminal wasn't sending any requests either so I opened the console in my browser and was greeted by the following errors:
Uncaught Error: Cannot find module './main.html'
at makeMissingError (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232)
at Module.resolve (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:238)
at Module.moduleLink [as link] (modules.js?hash=20efd7567f62601be7ae21d11e21baf9bd63c715:307)
at module (main.js:1)
at fileEvaluate (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346)
at Module.require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248)
at require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:268)
at app.js?hash=b426fd76718daefbb34707a544746de2f90dc26c:258
Is there any way to fix this?
Thanks a lot.
edit
Some of you wanted to take a look at the main HTML and js files in the client directory, so I've included them here:
main HTML and JS:
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
import '../imports/ui/body.js';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
<head>
<title>simple-todos</title>
</head>
How to read the stack trace:
at module (main.js:1)
In main.js on line 1 you are trying to import your main.html file.
Cannot find module './main.html'
Your main.js file likely has a statement like import './main.html'; on the first line.
This means that you must not have a main.html file adjacent to your JS file and so it cannot include it in the build.
Verify spelling, case, and location of the file (what folder it belongs in). They need to be siblings in the same folder.
I'm trying to include the bcoin library in my Meteor project. bcoin uses two type of modules, <module>.js and <module>-browser.js, depending whether one is building a node app or a browser app. In my case I need to import bcoin in the frontend part of my project, but a normal import bcoin from 'bcoin' resolves the module bcoin.js by default. Even if I use import bcoin from 'bcoin/lib/bcoin-browser' the file bcoin-browser.js will require other .js files rather than their -browser.js variant. The webpack configuration uses the directive
resolve: {
modules: ['node_modules'],
extensions: ['-browser.js', '.js', '.json']
},
is there something similar in Meteor?
Thanks
I am getting started with Angular2.0. I have been following the 5 Min Quickstart and everything works fine although I am using grunt to compile my Typescript and some Sass etc.
I just have one problem I cant solve by myself. I want to move all the public files (generated Javascript and production node modules into a subdirectory. I need to have that, because I run different applications unter the same domian. The frontend depends on the user type that logged in. (backend is written with phalcon)
This is my public folder (the webserver's root)
So the whole Angular applications should live inside the "talent" directory.
The "index.html" contains the following:
<script type="text/javascript" src="/talent/node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="/talent/node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
baseURL: '/talent',
packages: {'app': {defaultExtension: 'js',}}
});
System.import('app/app');
</script>
SystemJs is able to load my app.js file correctly but then trys to import angular2:
import {bootstrap, Component} from 'angular2/angular2';
Corresponding Javascript:
var angular2_1 = require('angular2/angular2');
This sends a request to http://example.dev/talent/angular2/angular2 resulting in an 404 error.
When I move the node_modules folder and the app folder to the webserver's root and remove baseURL: '/talent' it works just fine.
Here are the requests made for both the working solution (everything at root) and the not working part (everything under /talent)
Working:
Not working:
Can you help me getting this to work?
Had this exact same problem, and just figured it out after several hours. The System config baseURL needs to be set BEFORE angular2.dev.js is loaded. This is because the System.register calls need to be aware of the baseURL at the time of registrations.
e.g.
System.config({ baseURL: '/talent' });
A cleaner way is to just add System.config({ baseURL: '/talent' }) to the very bottom of the system.src.js file.
You can set paths for each library :
System.paths = {
'angular2/*': '/talent/node_modules/angular2/*',
'app/*': '/talent/app/*'
};
Does this work for you?
'angular2/angular2' has been deprecated. Your code should reference 'angular2/core' or the appropriate module for your imports.
You should also not need to specify the path for the angular2 imports in your System.config as System will load them in from the <script> tag you have in the HTML.
You are most likely receiving the 404 error because the angular2.dev.js file is loading 'angular2/core', 'angular2/common', 'angular2/platform/browser', etc... and you are referencing 'angular2/angular2' which is not being registered and therefor SystemJS is attempting to go out and find it.
Change all of your import {...} from 'angular2/angular2' to the correct module import as well. You can find these on the API Preview page of angular.io, or hopefully your IDE will find it for you.
I don't know which version of Angular2 you use but now with beta versions you should use these Angular2 modules:
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
Then you need to configure SystemJS as described below:
<script>
System.config({
map: {
app: 'talent/app'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
With this configuration, when trying to load the app/boot module, SystemJS will load the talent/app/boot.js file that was compiled before from the talent/app/boot.ts file. This behavior applies to all elements under the app module but not to other ones.
Modules like angular2/* will be found from files talent/node_modules/angular2/bundles/[something].js you included using <script> tags.
I made some tests and this configuration works for me ;-)
Thierry
I stumbled upon this question when trying to move from a local (dev) environment to a hosted server (CentOS) where the deployed URLs were all different to my local host. If you're in this situation and the accepted answer doesn't solve your problem (I was already importing the updated imports with Angular2 Beta 15) and using baseURL messes other things up (as it did in my situation) then use:
map: {
app: 'path/to/app/folder'
},
I saw this here and it worked for me (even though it was originally answering a MAMP environment question): Troubles with importing classes from Angular 2 modules with Typescript 1.7
Here's what worked for us:
Make the base ref point to the subdirectory containing the angular project. This will ensure that all the node_module dependencies are found, etc.
Configure the PathLocationStrategy with a different APP_BASE_HREF so that html5 mode still works for the actual angular app.
bootstrap(AppComponent, [..... bind(APP_BASE_HREF).toValue("/yardmap/planning")
ref: https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
ref: https://angular.io/docs/ts/latest/guide/router.html
base href
Most routing applications should add a element to the index.html as the first child in the tag to tell the router how to compose navigation URLs.
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/talent/">
......
</head>