Is there be any way to use single file components in Ember?

alidcastano · December 9, 2016, 2:05am

I know there’s a ember-component-css add-on, but I would rather have the HTML/CSS/JS all in one file. A setup similar to .vue single file components.

broerse · December 9, 2016, 7:26am

No there isn’t. You will need a package.json and some .js file. Not sure if I would want it but I think you can let browserify create this file. css will have to be included as html style I think. You would have to run npm run build like this:

github.com

pouchdb-community/relational-pouch/blob/master/package.json#L28


      
            "couch",
            "couchdb"
          ],
          "author": "",
          "license": "Apache-2.0",
          "bugs": {
            "url": "https://github.com/pouchdb-community/relational-pouch/issues"
          },
          "scripts": {
            "test-node": "webpack --config webpack.test.node.config.js && nyc ./node_modules/mocha/bin/_mocha test/test-node.js",
            "test-browser": "node ./bin/test-browser.js",
            "lint": "eslint --ext .js,.ts src test/test.ts",
            "test": "npm run lint && bash ./bin/run-test.sh",
            "build": "tsc && webpack --mode=production",
            "tsc": "tsc --build tsconfig.json",
            "dev": "node ./bin/dev-server.js",
            "coverage": "npm test --coverage && nyc check-coverage --lines 100 --function 100 --statements 100 --branches 100",
            "prepare": "npm run build"
          },
          "dependencies": {
            "uniq": "^1.0.1"

lightblade · December 10, 2016, 8:46pm

Not yet, but coming “soon”

The module unification RFC actually covered this use case. It let you mix style, template, and js all in one file. Erik Bryn did a demo at a Meetup before, but not sure how ready that was. Maybe hit him up on slack?

josiahbryan · September 10, 2018, 1:26am

Very late to the party here, but I’ve hacked up a REALLY simple Single-File-Component script:

https://gist.github.com/josiahbryan/fb9022d79ab909a7173c5d4855facadf

Posted that script for discussion just today at: https://discuss.emberjs.com/t/really-simple-single-file-component-support-for-ember-3-x/15438

Hope it helps! Cheers!

Topic		Replies	Views
Really Simple Single-File-Component Support for Ember 3.x+ Ember CLI	6	1674	September 11, 2018
Migrating from ember-component-css to ember-css-modules + sass Build Issues	0	382	June 13, 2023
CSS files in Ember.js	3	366	January 20, 2021
Can I use Ember with npm and webpack?	16	9085	February 3, 2016
Ember + Modern CSS Design	10	3322	February 21, 2024

Is there be any way to use single file components in Ember?

Related Topics