svelte-i18n
svelte-preprocess
svelte-i18n | svelte-preprocess | |
---|---|---|
7 | 23 | |
1,296 | 1,765 | |
1.5% | 0.3% | |
3.4 | 6.4 | |
4 months ago | 28 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
svelte-i18n
-
React may be getting a new hook β useEvent
Yeah I'm just using svelte-18n
-
Beam your Svelte internationalization up to a new level
Make sure you have Node.js and npm installed. It's best, if you have some experience with simple HTML, JavaScript and basic Svelte, before jumping to svelte-i18n.
- Any issues with Svelte that can be a target of an open source project?
-
Best i18n library for SvelteKit?
There are some great i18n libraries which can be used together with SvelteKit, such as svelte-i18n, typesafe-i18n or svelte-intl-precompile. However, a month ago, I decided to create my own, modular and lightweight one, because i was missing some features like dynamic translations load (load translations for visited pages only), custom translation sources (e.g. external API) or component scoped translations, etc...
-
What about localization with Svelte/SvelteKit?
I had reasonable success with https://github.com/kaisermann/svelte-i18n in one of my pet projects.
- Been using Vue for years professionally love it. But Svelte looks so good... What would I miss from Vue if I converted to Svelte?
-
A solution to internationalize routing in Sapper
With the svelte-i18n library internationalization of a Svelte / Sapper apps has gotten a lot better, but there has been an omission in solutions for routing languages (despite long discussions). I would like to share our solution for making internationalized routing:
svelte-preprocess
-
How to use Sass or Scss in Svelte/Sveltekit
You can learn more about the official svelte-preprocess and other available config here
-
How does the Svelte compiler works with the Typescript compiler?
svelte-preprocess is responsible for processing things like TypeScript and SCSS. The svelte compiler itself is only responsible for turning the svelte file into JavaScript.
-
Sveltekit scss issue
svelte-preprocess should handle scss out-of-the-box, and itβs included in SvelteKit by default if you created your project with create-svelte
-
Create Svelte + Typescript + tailwindcss Project(feat. error solved)
// svelte.config.js import sveltePreprocess from 'svelte-preprocess' export default { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors // **here -> postcss: true** preprocess: sveltePreprocess({ postcss: true, }) }
-
SvelteKit adapter-static building a index.html without metatags and html inside JS files
/** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess({ typescript: true, postcss: true, scss: { prependData: @import 'src/styles/helpers/functions.scss'; } }), kit: { paths: { assets: '', base: dev ? '' : '/route/in/website' }, trailingSlash: 'always', adapter: adapter({ pages: 'build', assets: 'build', fallback: 'index.html' }), files: { hooks: 'src/hooks', }, prerender: { default: true, }, } };
- Any way to make Svelte look and feel like Vue?
-
How to use autoprefixer and scss together in SvelteKit?
Continue to use tags
- In svelte.config.js ... (import aliases can be whatever you want)
- import svelte_preprocess from 'svelte-preprocess'
- import autoprefixer from 'autoprefixer'
- pass the Svelte preprocessor to Kit's preprocess config option and pass the postcss plugin to that Svelte preprocessor:
svelte.config.js
import svelte_proprocess from 'svelte-process' import autoprefixer from 'autoprefixer' const config = { // Consult https://github.com/sveltejs/svelte-preprocess for more info preprocess: [ svelte_preprocess({ postcss: { plugins: [autoprefixer()] } }) ] }
- In svelte.config.js ... (import aliases can be whatever you want)
-
Attempting to add math rendering to mdsvex, but encountering an error
import adapter from '@sveltejs/adapter-auto'; import preprocess from 'svelte-preprocess'; import { mdsvex } from 'mdsvex'; import remarkMath from 'remark-math'; import rehypeKatex from 'rehype-katex-svelte'; /** @type {import('@sveltejs/kit').Config} */ const config = { extensions: ['.svelte', '.svx', '.md'], // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: [ preprocess(), mdsvex({ extensions: ['.svx', '.md'], smartypants: true, layout: { project: "./src/routes/projects/layout.svelte", post: "./src/routes/blog/layout.svelte", }, remarkPlugins: [remarkMath], rehypePlugins: [rehypeKatex], }), ], kit: { adapter: adapter({ edge: false, external: [], split: false }) } }; export default config;
-
PostCSS- NESTED --- How can i use it inside a component
Have you tried https://github.com/sveltejs/svelte-preprocess
-
Creating your first Svelte App with SvelteKit
// We have changed the adapter line to use adapter-node@next import adapter from '@sveltejs/adapter-node@next'; import preprocess from 'svelte-preprocess'; /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(), kit: { // We have changed this to point to a build directory adapter: adapter({ out: 'build' }) } }; export default config;
What are some alternatives?
typesafe-i18n - A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
vite - Next generation frontend tooling. It's fast!
svelte-intl-precompile - I18n library for Svelte.js that analyzes your keys at build time for max performance and minimal footprint
svelte-vite-jest-template - Svelte template based on Vite's Svelte template, but includes unit testing setup (Jest and Svelte Testing Library).
jsLingui - π π A readable, automated, and optimized (3 kb) internationalization for JavaScript
imba - π€ The friendly full-stack language
buefy - Lightweight UI components for Vue.js based on Bulma
postcss-nested - PostCSS plugin to unwrap nested rules like how Sass does it.
tolgee-js - Tolgee JavaScript libraries monorepo
style-resources - Style Resources for Nuxt 3
vue-i18n-extract - Manage vue-i18n localization with static analysis
svelte-kit-cookie-session - βοΈ Encrypted "stateless" cookie sessions for SvelteKit